Recently I wrote a piece on how to make quick site updates, and a few folks sent email asking why I failed to mention the most obvious method of rapid web site alteration, namely Cascading Style Sheets. I skipped over Cascading Style Sheets (CSS) reasoning that those people who didn't know about CSS would likely just be confused while those of you who were already using CSS on their web sites probably weren't much interested in wasting an hour reformatting your web site when they already have the means to accomplish that task far more quickly. Basically I was saving CSS for a rainy day. And I imagine many of you are, too.

Well, it's been raining now for three days in New York City, so I'll take that as a sign that now's the time to delve into what CSS really is and why it's so fabulous.

Officially, Cascading Style Sheets are an extension of the HTML that give web designers precise control over typographic attributes like margins and line height in addition to more powerful font formatting. What this means is that instead of having to specify the paragraph font color each and every time you include a tag, CSS allows you to define the style in one place for your entire site. If you've formatted your site using CSS and you decide that instead of having green text you'd like purple text, all you need to do is update the single instance of the style instead of mucking through the entire site to change every occurrence of green font formatting to purple.

Unfortunately, something that sounds this good is bound to have a down side. The reason CSS has taken so long to catch on is because browser support -- the ability for the browser to display text formatting written in CSS -- has been wildly inconsistent. Microsoft's Internet Explorer-supported style sheets way back with its 3x browser, but even the newest 5x release has yet to perfectly implement the official W3C specs. Although Netscape came to CSS late, only offering support beginning with its 4x release, word on the street is that their upcoming 5x release will fully support the standard. Oddly enough the browser which most accurately renders all CSS codes at this time is the 3.5x version of upstart Opera. Although the situation is far from perfect, more than 85% of all web surfers are now using browsers that support styles sheets in some capacity, so it's about time to stop limiting our design for the minority 15%.

Features like background formatting and box positioning are still supported inconsistently enough for wary designers to want to avoid them. The more basic text formatting is strong enough to inspire you to take the plunge. The goal of CSS is to provide a way of separating content from formatting. The idea is to enable designers to use heading tags and list elements again without having to sacrifice aesthetic control.

Chances are you've probably formatted your page titles to stand out from the regular body text. Most sites use different fonts in a larger size with a unique color for title text. And sites achieve this look by using the tag for each and every page title. CSS allows you instead to put your title text back into a tag where it belongs structurally, and then define the tag so that your titles appear with the exact font, size and color that you want. A few older browsers won't recognize the style sheet and will resort to their default settings in order to render the tag but most will never know the difference.

The real payoff comes down the line when you start creating different style sheets for different viewers. Combining browser detection with style sheets allows you to tailor your web site to individual browser needs without having to ever retouch the content. If your document is properly structured using heading tags you can use style sheets to reformat and rearrange text according the capabilities of a viewer's specific browser platform. Your page titles can appear in big bold red and even move around and transform for viewers who have full JavaScript support while displaying in plain all caps for someone accessing your site from a cell phone.

While this level of fine tuning is highly sophisticated, it all comes back to properly formatting your raw content. You don't have to learn JavaScript today, but why not plan ahead for the day when you do?

The specifics of how to write style sheets is too large a topic to cover in this space, so if you're eager to learn more you'll need to check out a more instructional site.

Heidi Pollock is a frequent contributor to Web Site Journal and can also be found dispensing her website knowledge to the masses on HotWired and iVillage.
Full Author Profile -->