start page | rating of books | rating of authors | reviews | copyrights

Book HomeWeb Design in a NutshellSearch this book

Chapter 17. Cascading Style Sheets

Contents:

Using Style Sheets
How Style Sheets Work
Selectors
Specifying Values
Properties
Positioning with Style Sheets
What's New in CSS2
Style Sheet Tips and Tricks
Browser Support Charts

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.

17.1.1. Advantages

Style sheets offer the following advantages to web designers:

  • Greater typography and page layout controls. With style sheets, you can specify traditional typography attributes such as font size, line spacing, and letter spacing. Style sheets also offer methods for specifying indents, margins, and element positioning, and they even use terminology from traditional and desktop publishing, such as points and em spaces.

  • Style is separate from structure. HTML is designed for indicating the structure of a document, to which presentation is applied by the end user's browsing device. Over recent years, however, HTML has been extended to provide greater control over presentation (the <font> tag being the most infamous example). Style sheets, when done correctly, mark the return to the original intent of HTML by removing presentation instructions from HTML and placing them in a separate, optional area.

  • Potentially smaller documents. Placing font specifications once at the beginning of the document instead of using a <font> description for every individual element can drastically cut down on the number of characters in the document, thus reducing its file size. As always with the Web, it is desirable to keep file sizes (and download times) as small as possible.

  • Easier site maintenance. It is possible to link multiple HTML pages to a single style sheet, which means not only can you make one change that affects every instance of that element on a single HTML page, but you can also make style changes to hundreds or thousands of web pages by editing a single file.

  • It's easy to learn. Creating basic style sheets is no more difficult than tagging documents, once you learn the syntax rules. To make the job even easier, style sheet functions are now built into web authoring tools like Macromedia Dreamweaver and Adobe GoLive.

17.1.2. Disadvantages

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/).



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.