By Heidi Pollock (heidipollock@netscape.net)
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 your web sites probably weren't much interested in
wasting a whole entire hour on reformatting your web site when
you already had 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 'p' tag, CSS allows you to define the 'p' 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 H1 tag where it belongs structurally
and then define the H1 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 H1 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. If you don't know
where to start,
c|net's Builder.com has an excellent
introduction at http://webbuilder.netscape.com/Authoring/CSS/
Taking the plunge into CSS might seem like a lot of effort right
now but think of all the work you'll save the next time you want
to see how your site looks with pink text on an aqua background.
About the Author
Heidi Pollock (heidipollock@netscape.net) is a frequent
contributor to Web Site Journal and can also be found dispensing
her Web site knowledge to the masses on HotWired and iVillage.
In her spare time she likes to conjure up images of baklava and
wreak havoc on her netizen friends.
