CSS Cascading Style Sheet: Formatting The Text

Formatting the Text

Table of Contents:

• 1) Introduction
• 2) Spacing Words and letters
• 3) Spacing Between Lines
• 4) Aligning and Indenting text
• 5) Margins and Paddings
• 6) Borders
• 7) Floating Stuff

This tutorials is about how those words and lines can be spaced relative to one another. These stylesheets properties give us power over the space between words and letters, the leading (vertical spacing) between lines of text, and the alignment of text, margins and padding, borders, and floating elements.

Here\'s what we\'ll be covering:

• word-spacing
• letter-spacing
• line-height
• text-align
• vertical-align
• text-indent
• margin-top, margin-left, etc.
• padding-top, padding-left, etc.
• border-width, border-color, border-style, etc.
• float
• clear

Spacing Words and Letters

First up is a pair of properties that enables you to do things you can\'t do with HTML tags: control the spacing between words and the spacing between individual characters.

word-spacing

With the word-spacing property, you can add additional space between words:

H3 { word-spacing: 1em }

• in (inches)
• cm (centimeters)
• mm (millimeters)
• pt (points)
• pc (picas)
• em (ems)
• ex (x-height)
• px (pixels)

Behold the power of cheese.

Don\'t see anything different? That\'s probably because your browser doesn\'t support this property. Only the Mac version of IE 4 likes word-spacing.

letter-spacing

We have better luck with letter-spacing, which affects the kerning between characters and works in IE 4 and 5 (but not in Communicator, alas).

H3 { letter-spacing: 10px }

If you\'re using IE 4 or 5, here\'s an example:

Behold the power of cheese.

For both of these properties, you can also use a value of normal, which will ensure that the default browser spacing is used instead of any inherited word or letter spacing.

Don\'t be too discouraged! There are a lot of stylesheets properties that do work in both of the major browsers. One example is coming up next.

The common term for the spacing between lines is leading. The common term that Web designers scream when they find out they can now control leading is, "Wheee!"

line-height

line-height is a godsend. With it, we can achieve control over the vertical spacing between lines of text:

B { line-height: 16pt }

Netscape Communicator and Internet Explorer add the line-height value before the line. Thus, if you specify a value of 10px, then the browsers will display the first line of text 10 pixels down.

There are three different ways to give a value to line-height:

• by number,
• by length unit, and
• by percentage.

B { font-size: 12pt; line-height: 2 }

Four score and seven years ago, the Web wasn\'t yet a glimmer in anyone\'s eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?

By the way, you can also use nonintegers (such as 2.3) as values.

(You should know that IE 3 doesn\'t support number values. More often than not, using number values with IE 3 will result in a big mess of overlapping text.)

Leading by Length Unit

B { font-size: 12pt; line-height: 11pt }

Another way to define line-height is by using any of the length units we reviewed on the previous page (em and pt are most commonly used). Here\'s the above stylesheet rule in action:

Four score and seven years ago, the Web wasn\'t yet a glimmer in anyone\'s eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?

Note that you can make lines of text closer together just as easily as you can separate them. It\'s easy with stylesheets!

Leading by Percentage

B { font-size: 10pt; line-height: 140% }

Overlapping Text

You might have already asked yourself this question: What happens when line-height is so small that the lines of text overlap?

Well, they overlap, that\'s what. Check out this code:

B { font-size: 28pt; line-height: 2pt }

Whoa.


Cool.

"Whoa" uses the browser\'s default line-height, but "Cool" has so little line-height that it lies on top of the first line.

(Communicator and Internet Explorer interpret line-height differently. In Communicator, the text above is overlapped quite a bit. In IE 5, it\'s not overlapped at all.)

If you want to overlap elements on your page, line-height isn\'t the best way to do it because of browser inconsistencies.

Now that we can control the spacing of lines of text, let\'s move on and talk about the alignment of entire paragraphs.

text-align

With the text-align property, you can control the horizontal alignment of paragraphs:

H4 { text-align: center }

,

-

,

, and

.

Here are your options:

A value of left means the element will be left-aligned. A value of right means the element will be right-aligned. A value of center means the element will be centered. And finally, a value of justify means the element will be justified. Note that justify works in Communicator (both platforms) and IE 4 and 5 (Windows) but not in IE 3 or 4 (Mac).

Until now, we\'ve been talking only about applying stylesheets to text. But many properties can also be used on replaced elements. (A replaced element is any object that is replaced by other content. Graphics are the most common replaced elements, but Java applets and QuickTime movies are also frequently replaced.)

So we can also right-align an image, like so:



(Communicator sometimes doesn\'t like it if you apply CSS properties directly to the tag. A work-around is to surround with or

and then apply the stylesheet to the or
tag instead.
is better, because IE for Windows sometimes has problems associating a style with .)

vertical-align

Let me say right off the bat that browser support for vertical-align is almost zero. But I will state the basics here, in the hope that later browsers will support it.

H4 { vertical-align: top }
The vertical-align attribute enables you to control the vertical placement of text or replaced elements (e.g., images) relative to a parent element. For example, if you vertical-align as top a 2-by-2-pixel GIF and its parent is

text, then that GIF will appear at the top of that line of text.

Here are all the possible values for vertical-align:

• top aligns the top of the element with the tallest parent element on the line.
• bottom aligns the bottom of the element with the lowest parent element on the line.
• text-top aligns the top of the element with the top of the font of the parent element.
• text-bottom aligns the bottom of the element with the bottom of the font of the parent element.
• baseline aligns the baseline of the element with the baseline of the parent element.
• middle aligns the midpoint of the element with the middle of the parent element.
• sub puts the element in subscript.
• super puts the element in superscript.

The only current browser support for any of this comes from IE 4 and 5, which support the last two values. That\'s it for now.

text-indent

Want to give a paragraph an indent? (After living on the Internet for a while, you may have forgotten what an indent is!) Use the text-indent property:

P { text-indent: 2em }

Here you can see the above rule applied. The property works only on block-level elements (as defined earlier on this page). You can specify text-indent using any of the familiar length units.

You can also use percentage values. For example, this paragraph has an indent of 40 percent, which means the first line is indented 40 percent from where it would normally begin. (IE 4 for Windows assumes the percentage refers to the entire browser window, not just the width of the paragraph.)

Finally, if you give your text-indent a negative value, then you get a so-called hanging indent, in which the first line actually begins left of where it normally would. This paragraph has a text-indent of -10 pixels. IE 4 and 5 are a little buggy: They might not display the first few letters.

Use your indenting power well, young Jedi knight.

Indents are nice, but what about genuine margins? You got it.

Margins and Padding


---

As we know, to make a margin using HTML, you have to use tables. But not any more. Stylesheets to the rescue ...

Some Quick Definitions

First, we need to understand the terminology of the stylesheets language. Every single block-level element or replaced element is contained in what the cascading stylesheets creators call a box. That box consists of:

• the element itself,
• the padding around the element,
• the border around the padding, and
• the margin around the border.

An illustration might help:

You can control the padding, border, and margin separately, as we\'re about to see.

margin-top, margin-bottom, margin-left, margin-right

These four properties enable you to control the margin around each side of an element, like so:

H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }

As you can see, each margin can be set differently. Or you can choose to set just one margin side and let the browser use its default margin sizes for the other sides. You can apply margins to replaced elements (e.g., graphics) as well as to text.

The most obvious way to set margin values is through the length units we discussed previously: px (pixels), pt (points), and so on. But you can also set margins using percentage values.

When two margins meet, the browser adds the margins together.

Can you overlap elements by using negative margin values? You betcha. Once again, this isn\'t the ideal way to layer elements on a page, but it is possible:

are mind food.

Above, "are mind food" has a top margin of -55 pixels and a right margin of 60 pixels.

A big drawback of using negative margins to overlap elements is that browsers handle margin sizes differently. For instance, when displaying the example above, each of the four main 4.0 browsers (Communicator for PC, Communicator for Mac, IE for PC, IE for Mac) overlaps the text a different amount. (Communicator for PC doesn\'t overlap the text at all!)

Another drawback is that you can\'t completely control what gets layered on top. Again, different browsers behave differently. Communicator, for example, always places graphics on top of text. IE seems to display elements in the order they are loaded into the browser window.

In other words, if you want to layer elements, don\'t use negative margins.

Here are some other notes about browser support:

• IE 3 will sometimes display extra space when you use ruler units (e.g., inches and centimeters) for margin-bottom. Also, some HTML tags work with margin-bottom, but many don\'t.

• IE 4 sometimes has problems giving left margins to replaced elements such as graphics. Try wrapping the image in a
  and styling the

  .

padding-top, padding-bottom, padding-left, padding-right

Padding (the space between the element and its border) works just like margin control. You can define padding size for the top, bottom, left, and right sides of an element.

H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }

Just as with margins, you can use any length units or percentage values. We won\'t bother to go into detailed examples, since these properties work so similarly to the margin properties. You should know, however, that you can\'t use negative values for padding as you can for margins. (Also, I\'m sorry to report that IE 3 doesn\'t support the padding properties.)

Now let\'s talk about what\'s between margins and padding: borders.

Borders


---

Quite a few different stylesheets properties relate to putting a border around an element on a Web page.

( IE 3 doesn\'t support any of the border properties discussed on this page — just so you know.)

border-top-width, border-bottom-width, border-left-width, border-right-width

The first thing you can control is the width of the border, and you can control each side separately:

H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }

Here\'s the result of the above CSS rule:

You can apply borders to replaced elements as well as to text elements. Fun, eh?

You don\'t necessarily have to define a border for all sides of an element. If you want, you can put a border on just one side, as seen to the left of this paragraph. (In IE 4 and 5, you need to define the other sides as 0 or else the browser will give them its own idea of size.)

For specifying width, you can use any of the same length values we\'ve seen before. You can also use some built-in keywords:

The border above this text has a value of thin.

The border above this text has a value of medium.

The border above this text has a value of thick.

Do you want all sides of your border to be the same width? Simply use the shortcut border-width tag. The following stylesheets rule would put an even 1-inch border all the way around the graphic:

IMG { border-width: 1in }
border-color

The second aspect of borders that is under your control is color.

P { border-color: green; border-width: 3px }

This paragraph shows the above code in action.

You can use the color names browsers already recognize or, better yet, you can use hexadecimal values, like so:

H4 { border-color: #FF0033; border-width: thick }
If you want each side of your border to be a different color, you can make it so by listing each color:
P { border-color: #666699 #FF0033 #000000 #FFFF99; border-width: 3px }
The browser uses the first color value for the top side, the second for the right side, the third for the bottom, and the fourth for the left.

This paragraph shows the above code in action.

Note: Communicator doesn\'t recognize multiple colors, so you\'re stuck with just one. (When multiple colors are used, Communicator often uses blue for the whole border. We have no idea why.)

By the way, if border-color isn\'t used, then the border will take on the color of the element itself.

border-style

Finally, you can specify the style of the border line:

P { border-style: double; border-width: 3px }

The possible keywords are:

solid

double

dotted

dashed

groove

ridge

inset

outset

Note: You have to use border-style with IE 4 and 5, or they won\'t display any border at all.

IE 4.x for the Mac is the only browser to support dotted and dashed.

Another thing you might notice is that IE gives a border to the entire width of the area, whereas Navigator gives a border only to the word itself.

If you so desire, you can also set border styles individually for each side (though I have no idea why you\'d want to do so). As with border-color, you declare the values in this order: top side, right side, bottom side, left side.

And that about does it for borders. We have one more topic to look at in this lesson: floating elements.

Floating Stuff


---

We\'re already used to seeing floating images and tables on Web pages. Simply use the ALIGN=left attribute on an tag, for example, and text will flow around the right side of the floating image. Stylesheets have a somewhat more flexible syntax for floating elements, which is what this page is all about.

(I\'m sorry to report that Internet Explorer 3 doesn\'t support anything on this page. IE 4 and 5 can be a bit buggy too.)

float

The float property enables you to flow text around an element, including not just images but any block-level text as well.

H4 { float: left }

This text is floating left.

To the left you can see this CSS rule applied to some

text. This paragraph simply wraps around it, much like you\'d expect text to wrap around an image aligned left. Of course, you can also use a value of right.

 

If the floating element has too little space around it, you can add padding with one of the properties we discussed earlier in this lesson. (For some reason, using margins seems to cause trouble.)

clear

What if you want to wrap one paragraph around a floating element but make sure the next paragraph doesn\'t wrap? Use the clear property, much like you\'d use the CLEAR attribute in HTML (for example: CLEAR=right).

P { clear: left }

Let\'s look at a quick example:

This is one paragraph that is wrapping around an image that\'s floating left.

This is another paragraph. Without any clear property, it also wraps, as you can see.


And here\'s what happens if we use clear:

This is one paragraph that is wrapping around an image that\'s floating left.

This is another paragraph. Now I\'ve set clear: left, so the browser makes sure that the left side is clear of all floating elements before it displays the paragraph.

You can also use values of right and both.