Where I'm coming from. I build intranet pages for a utility company here in Phoenix: outage maps, the phone list, the safety bulletin, the cafeteria menu that everybody pretends not to read. Every desk in the building has Internet Explorer 4 on it, the same version, set up by the same people, so I learned style sheets at work on easy mode. Write a rule, hit Reload, there it is.

Then I came home to Netscape 4.61 on my own computer and learned them the hard way. The page that looked so sharp at the office came up at home in the wrong font, with colored bands that stopped halfway across, and once, after I made the window a little narrower, with no styles at all. This site is what I've worked out since February, so you can skip the part where I said words at my monitor.

Everything here is tested in IE 4 at work, IE 5 and Netscape 4.61 at home, and with style sheets switched off entirely, because some of your visitors are going to see your page that way whether you plan for it or not.

So what is a style sheet?

HTML was meant to say what things are: this is a heading, this is a paragraph, this is a link. A style sheet says how they should look. You write a rule once and it applies to every one of those things on the page. Instead of putting a <FONT> tag around every heading you've got, you write one line, and every heading changes. Change the line, and they all change again.

A rule has three parts: what it applies to (the selector), what you want to change (the property), and what to change it to (the value):

That makes every <H2> heading steel blue. You can put several rules in one set of braces, separated by semicolons, and you can name several things at once, separated by commas:

The name is Cascading Style Sheets, CSS for short. The W3C, the group that writes the HTML specification, made the first level, CSS1, an official Recommendation in December 1996, and CSS2 followed in May 1998. The browsers are still catching up. Internet Explorer 3 was the first of the big browsers with any support, and it was partial. Netscape didn't join in until Navigator 4.0, in 1997. IE 4 and 5 do a good share of CSS1 and a little of CSS2. Netscape 4 does less, and some of what it does, it does strangely. I've yet to meet a browser that does all of CSS1 right.

That's why this site is called what it's called. Style sheets are worth using today, but only if you go in brave and a little suspicious.

Three ways to add one

1. Right on the tag. The STYLE attribute works on almost any tag, and it only affects that one tag. Handy for a single odd paragraph. Useless for a whole page, because you're right back to typing it over and over.

2. A STYLE block in the HEAD. The rules go between <STYLE> and </STYLE>, up in the <HEAD> of the page, and they apply to the whole page.

(The <!-- and --> are there for old browsers. That's recipe number 8.)

3. A separate file, linked from every page. You put all your rules in a plain text file with a name like site.css, and every page points to it with one line in its HEAD. Change the file, and your whole site changes at once. This is the best way by a mile, and it's what we do at work.

So why are mine in the STYLE block? Because of the list. Go look at what the GeoCities.us File Manager will take: .html, .htm, .gif, .jpg, .txt, .mid, .wav and .au. That's the whole list. There's no .css on it. So every page on this site carries its own STYLE block, and when I decide the steel blue should be a little darker, I change it on three pages instead of one. Three pages, I can live with. If your site is forty pages, think hard about which rules you really need, and keep the block short.

This page's own style sheet

Here's every rule this page uses. View Source if you don't believe me.

Three things are going on. The links have no underlines. In IE 4 and 5 they turn a rusty red when your mouse is over them (in Netscape 4 they just sit there, which is fine). And the whole page is in Verdana, with Arial and Helvetica behind it for computers that don't have Verdana.

And the FONT tags are still there underneath. Every bit of text on this page is also inside an old-fashioned <FONT FACE="Verdana, Arial, Helvetica">. Belt and suspenders. If the style sheet doesn't load, or Netscape drops it, or somebody has style sheets turned off, the page still comes up in Verdana, in the right sizes, in the right colors. The style sheet makes it nicer. It doesn't hold the page up. That's the most important idea on this site, and the Netscape 4 page is mostly about why.

Where to next

Eight Recipes: eight tricks, with the code, and what each one does in IE, in Netscape 4, and with styles off.
Netscape 4 Survival: the three ways Navigator 4 will break your heart, and the rule I live by.