Cascading Style Sheets

Last Update: 19 June 2001

Cascading Style Sheets are a very cool, but relatively simple, way to dress up your web pages. Style sheets allow you and your readers to attach "style" elements to HTML documents. The language is simple and uses common desktop publishing terminology.

The current Style Sheet Specification is CSS1. At this writing, Internet Explorer 3.0+, Netscape Navigator 4.0+, and Opera 3.0+ support CSS1 style sheets. Thus far, no browser supports the CSS1 Specification 100%, but Netscape 6 and Opera 5 come very, very close. CSS1 was first recommended in the W3C's HTML 3.0 Specification. Style Sheets were not adopted in HTML 3.2, but were included in HTML 4.0 specification.

Style Sheets are pretty simple to implement (see The Basics for details). The frustrating part comes when a particular property is not supported by all or most browsers or, even worse, when its is supported in different ways. Thankfully, today we have some very nice tools at our disposal like the CSS Master Compatibility Chart that make using stylesheets a pleasure. See the References section below for a complete listing. Even with these wonderful tools, you'll want to test your documents in as many browsers as possible to get a feel for how it all works.

The Basics

To get started using stylesheets, you need to learn a few basics. Check out The Basics for a definition of stylesheets and the parts of a stylesheet. The Basics also describes how to apply stylesheets to HTML documents. As you read it, periodically view the source code to see what I'm talking about.

HTML Markup When Using CSS

Once you've got the basics down and know how to apply stylesheets to your Web documents, take a look at my list of tips for HTML markup. The most important thing to remember is to keep it simple. From the earliest days of Web standards development, HTML was meant to describe the structure of a document, while stylesheets were meant to specify the presentation details.

The Cascade Mechanism

This is a complex subject so I've prepared a PowerPoint Presentation on The Cascade Mechanism for your viewing pleasure. You can view it as HTML or download the original PowerPoint Presentation.

References:

Web Design Group's Guide to Cascading Style Sheets

Maintained by John Pozadzides and Liam Quinn. This is a much more friendly read than the W3C's official specification and covers the same material as the specification. Most students prefer reading this to reading the official spec.

Cascading Style Sheets, Level 1

W3C Recommendation 17 December 1996. The official specification. I always think it's a good idea to have the official spec on hand. I keep mine on my desk. Whenever I run into a debate with someone about CSS, I yank out the spec and prove my point. :-)

CSS Master Compatibility Chart

You'll definitely want to print this chart out! It'll save you lots of time and headaches. The chart lists every CSS selector and property and specifies each browser's support for that feature. If you stick to the properties listed as well-supported, you'll actually enjoy using Style Sheets! Don't forget to check back periodically for updates.

Web Style Sheets

The W3C's reference page on Style Sheets. It's also a nice demo of what you can do with Style Sheets.

Cascading Style Sheets, Level 2

W3C Working Draft 28-Jan-1998

CSS Support Charts

by Eric Myer, WebReview. Quick run-down on current browser support for CSS2 selectors.

Copyright © 1997-2001 by Tina McDuffie