The goal of Cascading Style Sheets (CSS) is to separate a Web page's style from its structure and to make it easier to maintain Web pages you've created. The structural elements of a page, such as headings (<h1> through <h6>) and body text, don't affect the look of those elements. By applying styles to those elements, you can specify the element's layout on the page and add design attributes (such as fonts, colors, and text indentation).

Style sheets give you precise control over how structural elements appear on a Web page. What's even better is that you can create one style sheet for an entire Web site to keep the layout and look of your content consistent from page to page. And here's the icing on this cake: Style sheets are easy to build and even easier to integrate int Web pages. I fact, you can add style markup to individual (X)HTML elements (called inline style), create sequences of style instructions in the head of an (X)HTML document (called an internal style sheet), or refer to a separate stand-alone style sheet using some kind of link or other reference (called an external style sheet) inside your (X)HTML document. In short, there are lots of ways to add style to a Web page!

As more Web sites transition to XHTML, the goal of the markup powers-that-be is to eventually deprecate (make obsolete) all formatting markup, such as the <font> element, from HTML's collection of elements. Someday, all presentation will belong to CSS.

Page 123: W3C Style Sheet reference
http://www.w3.org/style/css

Page 125: Westciv's CSS2 reference on the Web
http://www.westciv.com/style_master/academy/css_tutorial/index.html

Page 127, Figure 8-1: HTML page with no styles applied (display view) (code view)

Page 127, Figure 8-2: HTML page with styles applied (display view) (code view)

Page 129: W3C Validation service
http://jigsaw.w3.org/css-validator/

Page 130, Figure 8-3: Style classes (display view) (code view)

Page 131, Figure 8-4: Better style rules (display view) (code view)

Page 131, Tip: "CSS Structure and Rules" tutorial
http://www.htmlhelp.com/reference/css/structure.html

Page 133, Listing 8-1: Internal style sheet (display view) (code view)
(we added body text and headings to show off styles at work)

.ZIP file of all code samples in this chapter (9kb)

---

Share this page!