Topics in Web Publishing: Cascading Style Sheets

JQ Johnson, <mailto:jqj@darkwing.uoregon.edu>

CSS Basics

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. Style rules specify SELECTORs and PROPERTY:VALUE pairs.

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.

The Downside

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. Current generation browsers still behave inconsistently, though MSIE 5.0 does pretty well with improved CSS (both level 1 and 2, plus Microsoft-specific extensions) support.

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.

Practical Advice

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 additional practical advice:

· Design for graceful degradation, and for pages that still look at least readable in non-CSS browsers. Test all pages with CSS turned off. Test frequently in both Netscape Communicator and MSIE.

· 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 (e.g., with both institutional and personal style sheets).

Exercise 1

1. Download the file http://darkwing.uoregon.edu/~jqj/inter-pub/css/chillyclimate.html

2. Edit the downloaded file using NOTEPAD. Use an embedded style sheet to add styles to your document. View the resulting document using Netscape. The properties and associated values used in this exercise are:

Selector	Property	Value
body	background-color text-align	#FFFFFF (white) justify	Notes: 1) Colors can be specified using a hexadecimal value (#FFFFFF) or a color (white); 2) if you nest an HTML tag within another, the inner tag will (for most properties) "inherit" the properties of the outer tag--this can work for you or against you, so be careful.
h1	text-align	center
h1, h2	color font-family	#663300 (brown) sans-serif
blockquote	color	#003366 (blue)
blockquote	font-style	italic
dt	margin-left text-indent	3em -3em

Exercise 2

1. Download the file http://darkwing.uoregon.edu/~jqj/inter-pub/css/testpage.html

2. Examine the file using NOTEPAD. Then link to an external style sheet, testpage.css.

3. View the result in both Netscape and MSIE, and find at least 5 differences.

/* the external style sheet */

body {color: green;

font-size: large

font-family: Comic Sans MS}

p {color: red}

h2 {background: yellow}

blockquote {color: blue;

margin-left: 0px}

</head><body>

<tt>This text is not part of a paragraph.</tt>

<blockquote>Here's a block quotation.

</blockquote>

And here's a table with text in a TD cell.

</td></tr></table>

</body></html>

For Further Reading

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

· Notes for this workshop, <http://darkwing.uoregon.edu/~jqj/inter-pub/css/>.

· Web Design Group guide to Cascading Style Sheets, <http://www.htmlhelp.com/reference/css/>

· HTML Writer's Guild CSS FAQ, <http://www.hwg.org/resources/faqs/cssFAQ.html>

· Style Sheets Reference Guide <http://style.webreview.com/>. In addition to reference and tutorial information, an excellent browser-support comparison.

· Index DOT css. <http://www.usask.ca/mirrors/indexdot/css/> Another excellent reference and tutorial site.

· Cascading Style Sheets, <http://www.webreference.com/dev/style/>

· Cascading Style Sheets, level 1 (W3C Recommendation, 17 Dec 1996) <http://www.w3.org/pub/WWW/TR/REC-CSS1>. See also: "Cascading Style Sheets", <http://www.w3.org/Style/css/>.

· Fear of Style Sheets, <http://alistapart.zeldman.com/stories/fear4/>, A List Apart. What should work, but doesn't.

· Cascading Style Sheets, level 2 (W3C Recommendation, 12 May 1998), <http://www.w3.org/TR/REC-CSS2/>.

· Cascading Style Sheets, <http://www.wpdfd.com/CSS.htm>, an excellent list of references to further information.

· CSSCheck, an online CSS file syntax checker <http://www.htmlhelp.com/tools/csscheck/>

Books about CSS include:

· Cascading Style Sheets: Designing for the Web, Håkon Wium Lie and Bert Bos (Addison-Wesley, 1997). Portions at <http://www.webreference.com/content/css/contents.html>. Available in Science Library or CC Documents Room.

· Cascading Style Sheets Complete, by Busch, David D. and J.W. Olsen. McGraw-Hill, 1998. Available through netLibrary. <http://www.netlibrary.com/> or in Science Library.

· Core CSS: Cascading Style Sheets, by Keith Schengili-Roberts. Prentice Hall PTR, 2000. Available in Science Library or CC Documents Room.