Stylesheets Tutorial - Part 3

by Steve Mulder
The last tutorial [Part 2] was all about fonts and controlling the characters of text. This lesson is about how those characters, 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, the alignment of text, margins and padding, borders, and floating elements.
Here are the stylesheet properties we'll be covering: Obviously we have a lot to do here, and we're going to move a bit more quickly. Let's go!
NOTE: view these properties in ie4 and NN4 if possible as many properties in this part are supported only by one or the other and hardly by both !!

Spacing Words and Letters

First up is a pair of properties that enable 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:

The value you use will be added to whatever default value the browser already uses. You can use any of the length units we talked about yesterday when looking at font-size: Here's word-spacing in action:

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 (but not in Communicator, alas).

The functionality is similar to word-spacing: values are added to the default browser spacing. And you can use any of the same units listed above.

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

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 up next.

Spacing between Lines
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 "Weee!"

line-height

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

Whatever value you use is the amount of space between the baselines of two adjacent lines of text (the baseline is what characters without descenders - "x" but not "y" - sit on). Note that your value totally replaces the default browser value.

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:

Leading by Number When you specify line-height with a number, the browser uses font-size to obtain the leading: it multiplies font-size by the number. So, in this example, the line-height is 24 points, like so:

By the way, you can also use non-integers (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

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:

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

If you want yet another way to use line-height, try percentage values. In this example, the leading is 140 percent of 10 points, or 14 points. You get the idea.

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:

Here's what you get:

"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, barely at all.)

If you want to overlap elements on your page, line-height isn't really the best way to do it, because of browser inconsistencies. On Day 5, we'll look at the best ways to layer text, images, and so on. I promise: it will be worth the wait.

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

Aligning and Indenting Text
Let's talk about aligning paragraphs and images and adding paragraph indents.

text-align

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

This property works only on block-level elements, which are elements that on their own define a new paragraph, such as <P>, <H1>-<H6>, <BLOCKQUOTE>, and <UL>.

Here are your options:

A value of left means the element will be left-aligned, like this.

A value of right means the element will be right-aligned, like this.

A value of center means the element will be centered, like this.

And finally, a value of justify means the element will be justified, like this. This is difficult to see without multiple lines of text, so I'll add some text here. justify works in Communicator (both platforms) and IE 4 (Windows), but not in IE 3 or IE 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 so are Java applets, QuickTime movies, and other placed objects.)

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

(Communicator sometimes doesn't like it if you apply CSS properties directly to the <IMG> tag. A workaround is to surround your <IMG> tag with <SPAN> or <DIV>, and then apply the stylesheet to the <SPAN> or <DIV> tag instead. <DIV> is better, because IE 4 for Windows sometimes has problems associating a style with <SPAN>.)

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 the 5.0 browsers will support it.

vertical-align 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-x-2-pixel GIF and its parent is <H1> text, then that GIF will appear at the top of that line of text.

Briefly, here are all the possible values for vertical-align:

The only current browser support for any of this comes from IE 4, which supports 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 almost forget what an indent is!) Use the text-indent property:

Steve Mulder is a Senior Consultant at TSDesign, and author of Web Designer's Guide to Style Sheets. He wishes he could wallpaper his dining room using <BODY BACKGROUND>. Unfortunately, it would probably dither.