Each recipe has the code, what it looks like (this page's own STYLE block has every one of these rules in it, so what you see below is the real thing), and a report card: what it does in Internet Explorer 4 and 5, what it does in Netscape 4, and what's left when style sheets are off. The code goes in your STYLE block, between the <!-- and the -->.

1. No underlines
2. A:hover
3. Font sizes in pixels
4. Line-height
5. A colored band behind headings
6. Letter-spacing
7. First-line indents
8. Hiding the STYLE from old browsers

1. No underlines

The one everybody wants first. One line takes the underline off every link on the page.

What you get: a link back to the front page, with no line under it.

Now the warning. For five years everybody on the Web has learned that underlined words are the ones you can click. Take the underline away and your links have to say "click me" some other way: a strong color, different from your text, or bold. In a menu bar that's easy, because everything in a menu is a link. In the middle of a paragraph, a pale link with no underline is just a word in a funny color, and people will read right past it.

2. A:hover

Links that change color when the mouse is over them. A:link is a link you haven't visited, A:visited is one you have, and A:hover is any link with the mouse on it right now.

What you get: put your mouse on this link to the Netscape page. In IE it turns rusty red.

Keep them in that order, with hover last. When two rules are equally specific, the later one wins. A link you've visited is also a hovered link while your mouse is on it, so if A:visited comes after A:hover, the visited color wins and your hover never shows up on any link somebody has already clicked. I lost most of an evening to that one.

Hover isn't even in CSS1; it arrived with CSS2. Microsoft put it in IE 4 early, which is why it works there.

3. Font sizes in pixels

You can give a font size in points, the way your word processor does, but points depend on what the computer thinks an inch is. A Mac counts 72 dots to the inch and Windows counts 96, so 12-point type is 12 dots tall on a Mac and 16 on a PC. Pixels are pixels. Ask for 12 pixels and you get 12 on both.

What you get: this sentence is set at 16 pixels.

The catch. In Internet Explorer, the View, Text Size menu doesn't change text that's set in pixels. Somebody who needs bigger letters is stuck with the size you picked. So don't pick tiny. I never go under 11 pixels for anything a person has to read, and body text is 12 or 13. (Name TD along with BODY, or Netscape will ignore your size inside tables. More on that on the Netscape page.)

4. Line-height

More room between the lines of a paragraph. On paper, type is set with a little air between the lines; on a screen, browsers pack them tight. A long paragraph with some air in it is much easier to read on a monitor.

What you get: this paragraph has CLASS="airy" on it. The lines sit half again as far apart as they normally would. Compare it with the paragraphs above and below and see which one your eyes would rather spend ten minutes with. Mine pick this one every time.

Netscape 4 does it too, but if there's a picture in the middle of the paragraph it can run into the line above. Use it for plain text.

5. A colored band behind headings

A solid bar of color behind a heading, with the words in white. It's the look people build out of a one-cell table, done with one rule instead.

What you get:

A Heading With a Band

In IE the band runs the full width of the page. Netscape 4 is a different story: the color tends to stop at the end of the words instead of running all the way across, and the padding comes out lopsided. It still looks like a heading. It just looks like a heading somebody highlighted with a marker.

The rule that matters: set the text color and the background color in the same place. Here they're both in the style sheet, so if the style sheet goes, they both go, and you get an ordinary black heading on white. Put the white text in a FONT tag and the blue in the style sheet, and the day the style sheet goes missing your heading is white on white.

6. Letter-spacing

Spreads the letters of a word apart. Good for a short title in capitals. Terrible for a paragraph.

What you get:

STEEL BLUE

Netscape 4 doesn't do letter-spacing at all. It ignores the rule and shows the word normally, which is the best kind of failure: nobody on Netscape knows they missed anything.

7. First-line indents

Indents the first line of a paragraph, like a book. This one also shows you a class. The dot means the rule only applies to paragraphs you mark with CLASS="book", so your other paragraphs are left alone.

What you get:

An em is the width of the letter M in whatever font you're using, so 2em is a nice book-sized indent that grows and shrinks along with the type.

I use this on my sister's short stories, which she insisted go on the Web. Fiction looks right indented. Instructions look right with no indent and a blank line between paragraphs, the way the rest of this page is.

8. Hiding the STYLE from old browsers

Not a look, but do it on every page. Browsers older than style sheets (Netscape 3, IE 2, the old Mosaic still running in some school labs) don't know what a STYLE tag is. A browser that doesn't know a tag skips the tag but shows what's inside it, so your rules get printed across the top of the page as text. Put them inside an HTML comment and the old browsers skip them too. Browsers that understand STYLE know to look inside the comment anyway.

Two cautions. The <!-- goes right after the STYLE tag and the --> right before the closing one, each on its own line. And don't put two dashes in a row anywhere in between, because to an old browser that can end the comment early.

That's all eight. Next: Netscape 4 Survival, or back to the front page.