A friend recently asked us how Cascading Style Sheets really function (we have strange friends). He added, "I mean, I know what they are for, but how do they work?" We suspect that many people might have the same question, so this week we are going to start exploring CSSs.

We will start with the basics: CSSs are a way to separate content from style. That is, they allow the formatting of HTML documents according to rules that can be applied to all or specific parts of the content. And they are referred to as "cascading" because the styles are applied in sequence.

The browser's default styles are assigned the lowest priority, while any styles defined in an external style sheet are assigned the next-higher priority level. The next level up are the styles defined in a style sheet inside the document, and the highest priority are the styles defined in-line, that is, inside individual HTML elements.

This means, for example, that a style for an element (a specific HTML item such as bold tag) that is defined only in the browser will "flow" through to the final presentation unless that tag is redefined in an external style sheet or in another, higher-priority style sheet.

CSS development is under the auspices of the World Wide Web Consortium (W3C), and there are four versions (for details click here). CSS Level 1, released in 1996, defined the core CSS features. CSS-Positioning (CSS-P, which W3C no longer has documentation for) was an interim standard that added absolute screen positioning to CSS1.

CSS Level 2 (CSS2), released in 1998, took CSS1 and CSS-P and added support for international character sets and media-specific style sheets to address presentation by visual browsers, audio rendering, printers, Braille readers and other handheld devices, as well as content positioning, downloadable fonts, table layout, automatic counters and numbering, and some user interface properties.

CSS 2.1 corrects a few errors in CSS2, and CSS Level 3 is still in the works.

So what do we mean by "style"? Styles are properties of HTML elements and can be divided into the following types: text style, text layout, background, border, margin, padding, page layout, element type and user interface. You can find a complete list of properties here.

Browser compatibility

Now you might be thinking, "Gee, Gearhead, with so many levels and properties and such a potentially complicated idea, how CSS-compatible are the various browsers?" Glad you asked. The answers can be found at the extremely useful Web site QuirksMode.org, which belongs to a freelance Web developer in Amsterdam named Peter-Paul Koch (click here for more information).

The bottom line is that no browser seems to really get everything right, but there is enough commonality between browsers for CSS to be effective. Check out some of the minutiae Koch gets into about CSS bugs and incompatibilities - really cool if you like that kind of stuff.

Now how does CSS work? Simple . . . sort of. CSSs are sets of rules that tell HTML tags how to display their contents. There are three rule types: HTML selectors, classes and IDs.

HTML selectors are the text part of HTML tags; For example, the "h1" in "

" is the selector. A CSS rule to define the h1 selector could be:

h1 {font: 24pt bold courier;}

A class, denoted by a period followed by a string, can be applied to multiple HTML tags. Here's a definition for a class named warning:

. warning {font: 8pt italic Arial;}

Thus, the following paragraphs inherit the style of the class "warning" while those that aren't styled or have a different class don't:

Watch out!

No, really ...

I'm not kidding!

Too late.

Finally, an ID, denoted by a "#" followed by a string, is much like a class but intended to apply a style to a single tag, thus:

#warning {font: 8pt italic Arial;}

In use, this looks much like the class example but you normally would only find one instance of an element using the style:

Watch out!