W3C Core Styles | Cascading Style Sheets: Designing for the Web (3rd Edition)

The quickest way to start using style sheets is to link to one that already exists. W3C has published a suite of style sheets called W3C Core Styles. Designed by Todd Fahrner of Studio Verso, these style sheets offer you professional designs without the need to learn how to write your own style sheets. If you decide to write your own style sheets because you're reading this book, this has probably crossed your mind you can combine the Core Styles with those of your own.

The W3C Core Styles are built up from a set of modules that can be combined in infinite ways, much like LEGO bricks can. Eight of the combinations have proved to be particularly pleasing and have been given names for easy reference. The names are Chocolate, Midnight, Modernist, Oldstyle, Steely, Swiss, Traditional, and Ultramarine. You can see screenshots of them over the following pages.

To refer to one of them, put this in your HTML document:

 <LINK REL="stylesheet" TYPE="text/css"   HREF="http://www.w3.org/StyleSheets/Core/Steely">

Then, exchange Steely with the name of your favorite style.

One benefit of using the W3C Core Styles is that the W3C server "sniffs" what kind of browser you are using and withholds modules that are known to cause problems in old browsers. In the past, not all CSS browsers have handled all style sheets correctly. The problem is disappearing as new CSS implementations replace older ones, and W3C expects to remove the need for "browser sniffing" in the future. Figures 14.3 14.8 shows the results of using different W3C Core Styles.

Figure 14.3. The sample document without any style applied.

Figure 14.4. The "Steely" style sheet.

Figure 14.5. "Modernist."

Figure 14.6. "Oldstyle."

Figure 14.7. "Chocolate."

Figure 14.8. "Midnight."

When using W3C Core Styles, be aware that most HTML documents are not valid according to the HTML specification. Invalid documents, in combination with the Core Styles, may lead to unexpected results. W3C operates a validator service that checks your documents and helps fix problems.

The W3C validator can be found from http://validator.w3.org/

For best results, the HTML markup should be non-presentational (avoid, e.g., FONT tags, tables for layout, overuse of BR, and so on) and structural (e.g., use H1, H2 for headlines).