A Complete Guide to Web Design

How Style Sheets Work 391

CSS

How Style Sheets Work

Web Design in a Nutshell, eMatter Edition

• Use style sheets as “icing.”One way to create a site that degrades well to any
  browser is to first create a style-sheet-free site 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
  and, and theclassattribute). Choosing properties that are
  fully supported by the major browsers (see Appendix E) will broaden the
  chances your design will be seen as you intend it. For a “safe” list of CSS ele-
  ments, seehttp://style.webreview.com/safegrid.html.
  You can improve the sophistication of the typography and other presentation
  for those whose browsers support styles, and still keep the site clear and fully
  functional for all others.
  


• Use browser-detection scripts. Another approach is to develop two style
  sheets—one that is formatted to work well in Netscape, and another custom-
  tailored for Internet Explorer. Serve up the appropriate style sheet using a
  simple browser-detect JavaScript. (For more information on this technique,
  see “Serving the Right Style Sheet” by Rob Falla on WebReview,http://webre-
  view.com/wr/pub/98/05/15/coder/index.html.)


• 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 of
  your users (such as a corporate Intranet or a self-contained kiosk display),
  feel free to use the supported style sheets to their limits.

The Future of Style Sheets

Despite a bumpy start, style sheets still hold great promise as the preferred method
for specifying page presentation. In 1998, the W3C published its second style sheet
proposal (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.

Ironically, both Netscape and Microsoft are promising support of CSS2 elements,
although they do not yet fully support the CSS1 specification in a bug-free manner.
Hopefully, the bugs and inconsistencies will be ironed out and Version 2 and 3
browsers will fade into distant memory, taking style sheets out of the realm of the
theoretical into the essential.

How Style Sheets Work

Rule Syntax

Style sheets consist of one or more rules for describing how a page element
should be displayed. The following sample contains two rules. The first makes all
theH1s in a document red; the second specifies that paragraphs should be set in
12pt. Verdana or some sans-serif font:

H1 { color: red }

P { font-size: 12pt;

font-face: Verdana, sans-serif;

}