JavaScript & DHTML Cookbook

Chapter 11. Managing Style Sheets

Introduction

The idea behind Cascading Style Sheets (CSS) is quite simple: separate the content from rules that govern how the content lays out on the page. In these days of specialization within web site authoring groups, writers can write and designers can design without stepping on each other’s toes. There is perhaps an even simpler practical side as well. Rather than place design properties in HTML tags scattered around a document (or web site), the properties can be defined in just one place and automatically applied to every chunk of content that looks to the design rules for rendering instructions.

CSS is an evolving standard. It began with Level 1, which was partially implemented in Internet Explorer 3 and more fully in Internet Explorer 4 and Navigator 4. An extension to CSS, called CSS-Positioning, presented a standard for specifying the precise location of an element on the page (see Chapter 13). CSS and CSS-P were combined along with many new style facilities in CSS Level 2, which is implemented in varying stages of completeness starting with IE 5, Netscape 6, and Opera 5.

Adding Styles to a Document

You have three ways to embed style sheet rules into a document:

• With the <style> tag

• Via the style attribute in an element

• By importing them from an external file (see Recipe 11.4)

The <style> tag requires you to specify the MIME type of the CSS source code you are using. These days, all style sheets use the standard CSS syntax, whose MIME ...