JQ Johnson

Academic Education Coordinator

University of Oregon Library

1299 University of Oregon

Eugene, OR 97403-1299

<mailto:jqj@darkwing.uoregon.edu>

The Cascading Style Sheet specifications were developed long ago and far away in web time -- 1996 -- but are only slowly becoming important to typical web developers. The slow adoption has been due to poor and incompatible implementations in version 4 of the major browsers, and to a lack of tools. The situation is slowly changing, which is fortunate because CSS offers substantial benefits.

Cascading Style Sheets were originally designed to clean up HTML syntax, reign in the proliferation of visual formatting extensions that had appeared in versions 2 and 3 of the major browsers, and separate specification of visual appearance from specification of the logical function of text. The idea is to create rules that specify how a browser should render a particular tag. For example, if you want all of your headings to be rendered in a display font and a non-standard color, you might include the following code in the HEAD section of your HTML document:

Style rules can be localized in the HEAD section, or even placed at a separate URL and referenced in multiple web pages, the latter allowing you to change the appearance of a whole site by editing a single document. Rules can be specified that create variants of a particular tag, or properties can be applied to individual instances of a tag in a document.

In addition to separating appearance and textual function, the Cascading Style Sheet spec increased the expressive power of the language. Keywords were added to control appearance elements that could not be directly modified in HTML, e.g. for paragraph margins or background colors.

The specification allows multiple style sheets -- in the html document, included by reference, specified as preferences by the user, defaults for the browser, and so on -- with elaborate procedures (the "cascading" part) to determine which rules take precedence. And if no rule applies to a particular tag directly then most values are inherited from enclosing tags in the HTML document.

CSS was a great idea in principal, but got mired in the browser wars. Neither Netscape 4 nor MSIE 4 (both released in 1997) did a good job of supporting the specification. Not only were the implementations buggy and very incomplete; even if an attribute/value was "supported" it would very likely produce a different visual effect in the two browsers. Even basic concepts like inheritance are broken in both browsers. And some powerful CSS features, notably "positioning," didn't make it into the formal W3C specification for CSS Level 1 but were implemented (slightly differently) by the browsers.

It wasn't all the fault of the browser makers, though. The CSS spec is complex and arguably broken in some ways (e.g. the interaction of inheritance, explicit formatting tags, and the cascade). And, despite lack of implementation for Level 1, the W3C continued to move ahead with a second generation of standard, approving in May 1998 a CSS Level 2 with even more not-yet-implemented features.

Netscape 4.5, released last October, changed nothing. The rendering engine was not overhauled. As of December 1998, Netscape (soon to be AOL) has promised to include their "next generation" HTML rendering engine in Communicator v 5. It's difficult to predict where that will leave CSS support, particularly since the AOL buyout of Netscape has increased the uncertainty about whether the company will continue to aggressively develop a browser at all. On the other hand, Microsoft IE 5.0 (in Beta since November 1998) offers much improved CSS (both level 1 and 2) support.

The first advice to any web publisher is "know thy audience." If yours is largely using current-generation browsers, then CSS is something you'll want to learn and use. But you'll need to use it with care: Most of us will have some users with pre-CSS browsers or CSS support intentionally disabled. Some practical advice:

• Design for graceful degradation, and for pages that still look at least readable in non-CSS browsers. One methodology that works is to first design pages without any use of CSS, then add CSS as an afterthought. Another is to use only a minimalist set of tags (e.g. no FONT tags or TABLEs for formatting), with tags used based only on their functional meaning (BLOCKQUOTE means quotation, not indentation). Test all pages with CSS turned off.
• For complex uses of CSS (e.g. positioning, DHTML) use an authoring tool such as Dreamweaver. Avoid older tools such as Claris Home Page or FrontPage 97 even for simple use of CSS.
• Add style rules incrementally, testing in between. Styles and tags interact in complex, and often unpredictable, ways. If possible, avoid cascading (with both institutional and personal style sheets).
• Test frequently in both Communicator and MSIE.

Most of the best sources for information are on line. See especially:

Books about CSS include: