Creating Your First Style Sheet

Web Review
October 1997

Well, here we are, the first column in a new monthly series called "A Sense of Style." This column, which is an intergral part of Web Review's Style Sheets Reference Guide, will be devoted to discussing style sheets-- mostly CSS1 for now, but branching out as more standards are introduced and, if we're at all lucky, implemented by browser developers. For the most part, I'll talk about common CSS1 pitfalls and ways around them, and way cool style tricks. In addition, I'll also be doing extras like reviews of CSS1 tools and in-depth looks at real-world uses of style sheets.

For this month, let's go through the process of putting together a style sheet for a small document. This style sheet will contain only those properties and values which appear on the Safe Properties List, so the things described here should appear in any of the popular Web browsers.

It's generally best to start out with an idea of what sort of document this is, because that helps us decide what styles would be appropriate. For our test case, let's visit Matt, who's written a short essay about style sheets in order to get extra credit in Computer Class. It starts like this:

<H2>Style Sheets: An Overview</H2>
<P>
After years of "dirty hacks" intended to force Web pages to look
one way or the other, we now have the CSS1 standard<SUP>1</SUP>
from the World Wide Web Consortium<SUP>2</SUP> which enables
Web authors to create sophisticated appearance rules for their
Web pages.  However, the usefulness of this new standard...

As you can see, the paper continues on. It also has endnotes, but we'll get to those later. In addition to the H2 tag shown above, there are several sections, each of which are titled using an H3 tag. There are no other heading levels in the document. Furthermore, there are no images. (Matt's teacher believes in straight text information without unnecessary graphic embellishment.)

By the time he finishes everything, here's what Matt has for a style sheet:

<STYLE type="text/css">
BODY {font-family: serif;}
H2, H3 {font-family: Verdana, Helvetica, sans-serif;}
H2 {color: maroon; text-decoration: underline;}
P {margin-left: 3em;}
SUP {font-size: x-small; color: #666666;}
DIV.endnote P {text-indent: -1em; color: #333333;}
.link {text-decoration: underline;}
</STYLE>

...but how he got this sheet, and what each rule does, is the focus of our story. Let's go back to the point where Matt has finished the paper, and is just starting to create the style sheet.

Now, the first thing Matt decides is that his headings should be in a different font from the paragraph text. He also wants to save himself some typing, because he's your typical teenager and will go to any lengths to avoid doing a little work. He comes up with this:

H2, H3 {font-family: Verdana,Helvetica,sans-serif;}

Here, he takes advantage of CSS1's grouping rules, which state that any selectors ("H2" and "H3") which are listed with a comma between them are grouped-- that is, the following styles are applied to all the comma-separated selectors. Matt has also made sure that even if his teacher's computer doesn't have either Verdana or Helvetica installed, it will still use a sans-serif font.

It then occurs to Matt that his teacher's computer could be set to display all text in a sans-serif font, but he really wants his paragraph text to be in a serif font, like Times. So Matt puts in this:

BODY {font-family: serif;}

This will make all text serif, unless it's part of a tag which has another font-family set. For example, his headings, which he set above.

Moving on, Matt figures that his paragraph text will be easier to read if all of the text is indented a bit, thereby making the lines of text shorter as well as leaving the headings hanging off to the left side of the text. So he adds another rule:

P {margin-left: 3em;}

Now all of his paragraphs will be displayed with blank space on their left sides, thereby indenting them. The amount of blank space will be three times the height of the font in use for that paragraph, so it's nicely proportional to the text itself.

Of course, this being an advanced high school paper, it has endnotes listing various references. In standard convention, endnote marks are superscripted numbers. Matt has already put in his <SUP> tags, but he wants to make sure that the superscripted numbers are smaller than the main text. He's also decided that they should be a dark gray color, so that they have less visual weight. He decides on:

SUP {font-size: x-small; color: #666666;}

Now as for the endnotes themselves, Matt wants to use the hanging text style favored by many written style guides. This means the first line of the endnote starts to the left of the beginning of subsequent lines. After several minutes of fruitless experiments using margin-left, it suddenly hits Matt that what he wants is the reverse of normal paragraphs, in which the first line is indented about half an inch. Therefore, he can use the property text-indent to get the effect he wants. And so:

DIV.endnote P {text-indent: -1em; color: #333333;}

This uses the CSS1 capability to define contextual selectors. In this case, only those paragraphs which are in a division of class "endnote" will use these rules.

In reviewing the document, however, Matt realizes that the hyperlinks he's put in his footnotes have disappeared, visually speaking. This is because Matt has link underlining turned off, and the links are inheriting the dark gray color from the text, so they look the same. In the endnotes, Matt wants to be sure that the links will be visible by being underlined, even if link underlining is turned off. So he creates a new class called "link" and does the following:

.link {text-decoration: underline;}

Once Matt adds CLASS="link" attributes to the anchor tags in his endnotes, his endnote links are underlined. (Matt could have used the pseudo-class A:link, but he knows that not all browsers support it and wants to make sure that this effect will be applied no matter what his teacher uses to read the paper.)

Looking things over one last time, Matt decides that his document's title should look different from everything else. Matt's been listening to Rüsted Root while he works, so he figures the title should be a rusty red, with underlining. The closest color to "rust red" he can think of is maroon, so he goes back to add this rule:

H2 {color: maroon; text-decoration: underline;}

And with that, Matt decides it's good enough for a Tuesday night and posts the page to his personal workspace on the school's server, ready for his teacher to grade it the next day. Happy with a job well done, he fires up Quake and spends the next three hours pulverising bad guys.

(If you'd like to see the above style sheet in action, we have an excerpt of Matt's paper, which of course earned him an 'A'.)