Best viewed with style

Both of the major browser vendors, in the midst of their rush to add new and usually badly-designed new HTML tags, have recently added support for style sheets -- a feature that could make most if not all of those tags obsolete.

Now, if they'd only get rid of the remaining bugs in their style sheet support...

What, Who, When, Where, Why and How

What are style sheets?

Style sheets are a way to detach the presentation of an HTML document from the structure of an HTML document. The structure of a document involves things like paragraphs, headers, and hypertext links; the presentation involves things like fonts, colors, and margins. The structure of a document might mean some text should be emphasized; the presentation of that text might be italic (with a GUI browser), or underlined (with a TTY browser), or spoken in a louder voice (with a speaking browser)

The most commonly implemented style sheet language at present is Cascading Style Sheets level 1; the Web Design Group has done a wonderful reference for CSS1. There is also the Netscape implementation, JavaScript Style Sheets; in Netscape 4.0, CSS1 is internally translated into JSSS, leading to the requirement that JavaScript must be enabled to see stylesheets, as well as any number of interesting bugs. The JavaScript requirement (and most of the bugs) seem to still be in 4.5; I have hopes for Navigator 5.0, but not particularly high hopes.

Why are they better than my browser's extensions?

Browser-specific "extensions" to HTML have been blurring the line between presentation and structure for quite some time. What is the structural meaning of <blink>, anyway? How would--how could--a speaking browser render it?

With style sheets, the presentation (blinking text on browsers that are capable of it) and the intent (to very strongly emphasize a particular piece of text) can be divorced. With HTML such as <strong class=very>WARNING</strong> and an associated stylesheet entry such as STRONG.very { text-decoration: blink }, the author can suggest that blinking is his intended method of strong emphasis for this text, while allowing other browsers to use their own methods to provide emphasis. This allows the presentation to adapt to varying circumstances while still giving the page author a say.

Why should I use them when my pages look fine in my browser?

Your pages may look fine in your browser, at your current version, with your fonts, on your screen. How will they look when you change browsers, or upgrade your browser, or change your font, or get a bigger (or smaller--think palmtops) screen?

Misuse of structural elements for layout (like <dt> or <blockquote> for "indented paragraphs") is "cargo cult HTML". Like the bamboo "airfields" built by the cargo cults of the South Seas, appearance is all that they provide; they don't provide any useful structure that could be used by a non-GUI browser, or an intelligent Web indexer, or an HTML pretty-printer.

Besides, if you take advantage of linked style sheets, you can control the presentation of hundreds of pages from one place. If you decide you want a new look, you can change the style sheet instead of having to go through megabytes of HTML with a search-and-replace that might miss things, or change the wrong things.

What browsers support them?

Right now (August 1998), both "mass-market" browsers (Netscape and MSIE) have (some, buggy) CSS1 support. Other browsers with support include the W3C's Amaya and Emacs-w3.

Unfortunately, there are often bugs in the CSS1 handling of major browsers. Netscape requires that JavaScript be turned on for style sheets to work (sigh); only very recent versions of Emacs-w3 properly implement "transparent" as a background specification; various versions do unenjoyable things with line-height; features like first-letter and the like are either missing or broken. The Style Sheets Reference Guide and CSS Pointers are good places to look for information on the (many) implementation problems.

How do I write stylesheets, and how do I tie them to my documents?

The Web Design Group's already said it better than I could in their CSS Reference. You can also use the stylesheet used for this page for inspiration.

Who do you think you are, anyway?

I'm someone who writes HTML meaning it to be read for content, while still wanting to have a better presentation than the generally bad defaults included in most mass-market browsers. My web design principles stress content first, with presentation to be guided by the content.

I'm also a reader of web content; as such, I shy away from pages that demand I use a specific browser, screen size or depth, window width, plug-in, or extension language.