Chapter 17. Cascading Style Sheets
Using Style Sheets
For those frustrated with the limited control over document presentation provided by straight HTML markup, Cascading Style Sheets (CSS) are a welcome advance in web design. They are also the official W3C standard for controlling all presentation, leaving HTML markup to indicate structure as it was designed to do.
17.1. Using Style Sheets
Like their counterparts in desktop publishing page-layout programs, style sheets in HTML allow authors to apply typographic styles and spacing instructions for elements on a page. The word cascading refers to what happens when several sources of style information vie for control of the elements on a page -- style information is passed down from higher-level style sheets (and from parent to child element within a document) until it is overridden by a style command with more weight. (The cascading rules are discussed in detail later in this chapter.)
This comes as good news both for designers who want more control over presentation and for HTML purists who stand by the principle that style should be separate from content and structure. Style sheets make both these dreams possible, but it is important to be aware of their advantages and disadvantages.
Style sheets offer the following advantages to web designers:
As of this writing, the sole drawback to implementing style sheets remains uneven browser support. First, style sheet information is not supported in browser versions earlier than Microsoft Internet Explorer 3.0 or Netscape Navigator 4.0. That is not as frustrating as the inconsistency of support among browsers and versions that claim they do support CSS.
The World Wide Web Consortium first published its recommendation for style sheets in 1996, and they were first implemented by Internet Explorer 3.0. Since then, as usual, Microsoft and Netscape have chosen diverging paths in the properties their browsers support and the way those properties are presented. The browser-support charts in Appendix E, "CSS Support Chart" are evidence of the gap in style sheet implementations. A constantly updated browser support list is maintained online by Eric Meyer for WebReview at http://www.webreview.com/style/css1/charts/mastergrid.shtml.
The good news is that the outlook continues to improve with the release of standards-compliant browsers and as older versions fade away. Internet Explorer 5.5 and higher and Netscape 6 claim to support almost all of the CSS Level 1 specification and parts of CSS Level 2 (the latest version as of this writing). With an estimated 95% of web users surfing with 4.0 or higher version browsers, you can safely assume that basic styles (font, size, and color, for example) will reach the vast majority of your audience.
17.1.3. Strategies for Using Style Sheets Today
Although consistent browser support for style sheets remains a large issue, that does not mean that you should abandon them completely. In fact, many large commercial and consumer-oriented sites are taking advantage of the power of style sheets today. Here are a few strategies for adding styles to your site:
17.1.4. The Future of Style Sheets
Despite a bumpy start, style sheets still hold great promise as the preferred method for specifying page presentation. The Web Standards Organization (http://www.webstandards.org), an industry watchdog group that educates the web community on the importance of standards, urges web authors and developers to begin using style sheets right away. Kiss your <font> tag goodbye!
In 1998, the W3C published its second style sheet proposal (CSS Level 2, or CSS2), which includes additional properties and advanced methods for absolute positioning that could make tables and frames as layout devices a thing of the past. Style sheets are also a key component to programming dynamic effects with DHTML. CSS Level 3 is already being considered. (Both CSS2 and CSS3 are discussed later in this chapter.)
17.1.5. For Further Reading
Not surprisingly, the place to go for information on Cascading Style Sheets is the W3C's site at http://www.w3.org/style/CSS. The full CSS1 recommendation is located at http://www.w3.org/TR/REC-CSS1; for CSS2, see http://www.w3.org/TR/REC-CSS2.
Another great resource (and one that's easier to digest than the specs themselves) is the book Cascading Style Sheets: The Definitive Guide by Eric Meyer (O'Reilly, 2000). Eric has also written many useful articles on style sheets for WebReview magazine (http://www.webreview.com). There you'll also find his CSS browser compatibility charts (http://www.webreview.com/style/).
Copyright © 2002 O'Reilly & Associates. All rights reserved.