Table of Contents Previous Article Next Article

[Graphic: Tools You Can Use]
Let Style Sheets Unify the Look of Your Web Pages

Many people write documents for the Web using HTML, but are frustrated by its limited ability to control how their Web pages look. If you are in this group, consider using style sheets.

Change the Look Easily and Get Better Performance

Style sheets allow you to separate appearance--including font styles, sizes, and colors--from content, which is formatted by HTML. Using one style sheet across your entire set of documents lets you quickly modify how they look. A change of your address font, for example, can be implemented throughout your document set simply by making that change in the style sheet.

Using style sheets makes your HTML source document a bit shorter, as you can move any code for the presentation out of your HTML document and into your style sheet. Because the style sheet can be cached by a user's browser, performance is also a little better.

What Does a Style Sheet Look Like?

A style sheet can be only a few lines, or it can be dozens of lines long. Here is a very simple style sheet: 


BODY {color: black; background: white}

H1, H2, H3, H4, H5, H6 {font-family: Palatino, Helvetica, sans-serif}

ADDRESS {font-size: 75%}

This style sheet defines the text color as black, the background color as white, the headers (H1-H6) as first Palatino, then Helvetica, then as any other sans-serif font in your computer system. Your browser will pick the first defined font that works for your system. Finally, the size of the ADDRESS font is defined to be 75 percent of the default text size.

Make Your Pages Accessible

If you employ the <FONT> element in your HTML, it can cause problems for people using small displays, for near-sighted visitors who need very large fonts, for the color-blind, and for others with special needs. You might assume that viewers of your Web pages will be using a computer and browser similar to your own, but that is not always the case.

If you use a style sheet to define fonts and colors, then the reader can choose whether to view the document with your style sheet or to make adjustments. If you define fonts and colors in the HTML code, you take the option of reader-adjusted viewing--and perhaps accessibility--away. You can read more on this topic at www.mcsr.olemiss.edu/~mudws/font.html

Browsers That Support Style Sheets

Several browsers now support what is called Cascading Style Sheets Level 1 (CSS1), a specification that is the recommendation of the World Wide Web Consortium (W3C), an international industry consortium dedicated to developing common standards for the Web.

The problem is that no browser implements the entire specification, and some older browsers do not support CSS1 at all. The trick is to figure out what features you can use that will degrade gracefully on browsers that do not support them. The Web Review (at webreview.com/wr/pub/guides/style/style.html) publishes a style sheets reference guide with handy charts on what features of CSS1 are supported by which browsers.

Netscape Navigator 4, Internet Explorer 4, and Opera 3 all support parts of CSS1. Opera 3 supports the most features at the moment, with Internet Explorer 4 coming in second.

Finding Pre-made Style Sheets

The W3C has created some core style sheets (see www.w3.org/StyleSheets/Core/), and you can use these by either:

Be aware that their core style sheets will detect what browser you have, and then modify the style sheet according to that information. As browser support for cascading style sheets improves, this browser sniffing will not be necessary.

For More Information

There is much more to learn about style sheets. These resources can help you get started:

Table of Contents Previous Article Next Article

University of Washington Computing & Communications
Windows on Computing, No. 23, Spring 1999
newsltr@cac.washington.edu