Chapter 11 -- Introduction to Cascading Style Sheets

Chapter 11

In the early days of the Web, the number of HTML tags exploded. Different browsers supported their own proprietary tags, and no one browser supported all tags. To format text with proprietary tags, you had to include them within the content of the document itself, usually in place of more widely supported tags. This tied the appearance (or style) of the content to the content itself, which led to a number of problems; most prominently, this meant that content formatted in one browser was not necessarily formatted in another, and changing the look and feel of a Web site required retagging all documents on the site.

The Cascading Style Sheets (CSS) specification was developed by the World Wide Web Consortium (W3C) to head off this trend and to provide a simple model that separates the style of a document from the content. A style sheet following this specification can be added to a Web page or site that specifies the appearance or style of all tags on the page or site. For example, a style sheet can be created that defines <H1> tags as bold 24-point Verdana type with a 1-centimeter white border and a red background. Changing this one definition can change the appearance of all <H1> tags on the site. With this separation, what previously required retagging the entire content of a document now can be done with a few simple tweaks to the document style. In addition, CSS allows an unprecedented level of control over the appearance and layout of Web-based documents. With CSS, you can alter everything from the size, style, and color of text to the spacing between letters and lines, the border and padding around elements, and the exact position of an object on the page.

Dynamic styles is Microsoft's implementation of CSS, used in Internet Explorer. It complies more closely with the Cascading Style Sheets level 1 (CSS1) and the more recent level 2 (CSS2) specifications than any other common browser. Although, in the strictest sense, dynamic styles refers to the Microsoft implementation of CSS, we (like the rest of the Web community) will use the terms "Cascading Style Sheets," "CSS," "styles," and "dynamic styles" interchangeably throughout this book.

While several browsers include some support for styles (including Internet Explorer 3 and Netscape Navigator versions 4 and later), Internet Explorer versions 4 and 5 currently offer the most extensive support. However, no browser implements the entire CSS2 specification, in part because CSS2 is designed to expand the concept of styles to apply to just about any medium, including audio. For information on the various CSS specifications as defined by the W3C, visit the W3C Web site at www.w3.org/Style/. These documents are well written, detailed but readable, and useful. Support for these specifications is becoming much more widespread. Netscape has pledged far greater support for Navigator 5, and versions 3.5 and later of Opera Software's Opera browser provide extensive support for CSS.

This chapter discusses two ways of applying styles: (1) using the STYLE attribute to apply styles to individual elements and (2) using style sheets to apply styles to a page or an entire Web site. A style sheet can be an external file linked to an HTML document, or it can be included in the document itself. The following sections explain the basic syntax for using styles in these ways. For information on applying styles through script, see Chapter 15.