<style>

Flexibility

You might want the flexibility of style sheets for several reasons. What if you are working for a client and want to show them assorted options: do they want green or yellow background? do they want a formal or casual font? By using a linked stylesheet you can make the changes easily. Just imagine doing it the old way, changing the color and font specification for each headline and paragraph on each page!

Using a style sheet also makes it far easier to offer your viewers options is you want to provide a site more accessible to the visually impaired, for example. The aware.hwg.org site about accessibility maintained by the HTML Writers Guild does this.

Keeping the Web Intact

Even more important, using style sheets is the way you can help keep the web intact. The primary goal of html has always been universal delivery of information. As the Web became more popular, web authors clamored to make their pages look more like magazines or TV screens. Designers devised all kinds of workarounds to make the page layout look just right. Unfortunately those workarounds, clever as they were, compromised the structural standard and promise of universal usage. Later versions of html have given web authors more options to control layout while maintaining the universal, open standard. Style sheets take us one step forward in this goal.

Style sheets also help your pages load more quickly and take less space on your server. Since you do not have to type something like <font face="Arial, Helvetica, sans-serif" size=12pt" color="#993300"> at the start of every paragraph or header, the files are smaller.

The Problems

Leader Board

Web Standards Project

Of course there are some problems. Until last year the major browsers were slow to implement the style sheet guidelines, even though they participate in the W3C that approved the guidelines. Web Review maintains a "Leader Board" that shows how well the major browsers implement the style sheet standard. This changes all the time. Currently Microsoft and Netscape implement almost 40% of the standard, while Opera implements 80% of the guidelines. The Web Standards Project (WASP) has detailed the "Top 10 Problems" for browser implementation of style sheets. WASP also explains very well what is at stake for the web with style sheets.

Safe Tags for Style Sheets

and
Master List of Tags

Eric Meyer at Web Review also maintains a list of what tags are safe to use because most browsers support them, as well as a master list of tags supported by browsers.

If you look over the list, it appears that it is "safe" to use those tags that determine the size, face, color, and line spacing of fonts and backgrounds. Those tags that deal with positioning text on the page are not so well implemented.

That is why Jeffrey Zeldman's advice in Fear of Style Sheets seems like a happy compromise for now. Use the style sheets to control the font selection and display. If the style sheet does not work, the worst that will happen is that the page will display in the viewer's default font. For now, until the browsers support the full style sheet guidelines, use tables without borders to achieve layout on a page. I also set the "body bgcolor" and link and vlink colors with the body tag, as well as in the style sheet, so that older browsers will not display the default grey for the background or blue for the links.

Continue to "Details Make a Difference">>