 | Web Design in a Nutshell, 2nd Edition |  |
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.
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:
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.
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.
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:
Include end tags. While current browsers don't mind if you leave off the </p> or </li> tag, style sheets (and other web technologies such as XML) do mind. It is necessary to have clearly defined text elements, including both tags. If you think you may be adding style sheet functionality to your site in the future, get ready by closing all your tags today.
Use style sheets as "icing." One way to create a site that degrades well to any browser is to first create a site free of style sheets that is acceptable on all browser and platform configurations. Once you are happy with it, add style sheet information that will not affect the display in older browsers (such as <div> and <span>, and the class attribute). Choosing properties that are fully supported by the major browsers (see Appendix E, "CSS Support Chart") will broaden the chances your design will be seen as you intend it.
Serve different styles to different browsers. Another approach is to develop two versions of your site and deliver the proper version using a browser-detect JavaScript. You might have a fully-styled version that is aimed at the standards-compliant browsers (Internet Explorer 5.5+, Netscape 6, and Opera5) and another "vanilla" version that is stable without style sheets for everyone else. Since Navigator 4.x is particularly buggy, you can hold back certain style information from it using the @import method of style sheet application (which Navigator 4 does not support) along with or instead of <link>.
Use style sheets for intranets. If you have the good fortune to be designing a site for which you know the exact browser/platform configuration for all your users (such as a corporate intranet or a self-contained kiosk display), feel free to use the supported style sheets to their limits.
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.)
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/).
|  | |
| 16.2. Specifying Colors by Name |  | 17.2. How Style Sheets Work |
Copyright © 2002 O'Reilly & Associates. All rights reserved.