Chapter 16. Cascading Style Sheets and Dynamic HTML

Cascading Style Sheets (CSS) is a standard for specifying the presentation of HTML or XML documents. In theory, you use HTML markup to specify the structure of your document, resisting the temptation to use deprecated HTML tags such as <font> to specify how the document should look. Instead, you use CSS to define a stylesheet that specifies how the structured elements of your document should be displayed. For example, you can use CSS to specify that the level-one headings defined by <h1> tags should be displayed in bold, sans-serif, centered, uppercase, 24-point letters.

CSS is a technology intended for use by graphic designers or anyone concerned with the precise visual display of HTML documents. It is of interest to client-side JavaScript programmers because the Document Object Model allows the styles that are applied to the individual elements of a document to be scripted. Used together, CSS and JavaScript enable a variety of visual effects loosely referred to as Dynamic HTML (DHTML).^[*]

^[*] Many advanced DHTML effects also involve the event-handling techniques shown in Chapter 17.

The ability to script CSS styles allows you to dynamically change colors, fonts, and so on. More importantly, it allows you to set and change the position of elements and even to hide and show elements. This means that you can use DHTML techniques to create animated transitions where document content "slides in" from the right, for example, or to create an expanding and collapsing outline list in which the user can control the amount of information that is displayed.

This chapter begins with an overview of CSS. It then explains the most important CSS styles for common DHTML effects. Next, the chapter describes various ways of scripting CSS. The most common and important technique is to script the styles that apply to individual document elements using the style property. A related technique indirectly modifies an element's style by altering the set of CSS classes that apply to that element. This is done by setting or modifying the element's className property. It is also possible to script stylesheets directly, and the chapter concludes with a discussion of enabling and disabling stylesheets and querying, adding, and removing rules from stylesheets.