Section I.5. Cascading Style Sheets

I.5. Cascading Style Sheets

A style sheet contains specifications for the rendered appearance of content on the page. The link between a style sheet and the content it influences is either the tag name of the HTML element that holds the content or an identifier associated with the element by way of an attribute (notably the id or class attribute). When a style sheet defines a border, the style definition doesn't know (or care) whether the border will be wrapped around a paragraph of text, an image, or an arbitrary group of elements. All the style knows is that it specifies a border of a particular thickness, color, and type for whatever element or elements are associated with the style. That's how the separation of presentation from content works: the content is ignorant of the style and the style is ignorant of the content.

A W3C working group undertook the task of creating a supplementary markup syntax that allowed styles to be associated with HTML content (http://www.w3c.org/Style/). The technology, called Cascading Style Sheets (CSS), matured relatively quickly during a time when mainstream browser versions had difficulty keeping up with the latest standards. The W3C document that contains the most detailed information about CSS is the second version of the recommendation, called CSS2. This version includes the original CSS1 standard, special features for element positioning (initially released separately as CSS-P), and a large number of features that are new with CSS2. A modified version of the recommendation, CSS2.1, includes numerous corrections and clarifications.

Just as the current XHTML effort embraces modularization, so does CSS. The recommendation known as CSS3 is a modularized version of CSS2.1, but also with many additional properties. Given the enormous size and range of style properties in CSS2.1, modularization provides browsers an opportunity to claim support for well-defined subsets of the CSS recommendation, without supporting features that don't apply to the devices they support.

I.5.1. CSS Rationale

The Cascading Style Sheets recommendation lets authors define style rules that are applied to HTML elements. A rule may apply to a single element, a related group of elements, or all elements of a particular tag (such as all p elements). Style rules influence the rendering of elements, including their color, alignment, border, margins, and padding between borders and content. Style rules can also control specialty items, such as whether an ol element uses letters or roman numerals as item markers.

Theoretically, CSS frees you from the anarchy behind the arbitrary way that each browser measures fonts and other values. Font sizes can be specified in real pixel or point sizes, instead of the inexact 1-through-7 relative scale of HTML. If you want a paragraph or a picture indented from the left margin, you can do so with the precision of ems or picas, instead of relying on hokey arrangements of tables and transparent images. (Of course, in practice, a browser's default style sheet and user preference settings can still prevent text styles from appearing identical everywhere. We're still a long way from replicating the precision of print publishing on pages viewed through a web browser.)

Many of the style specifications that go into CSS rules derive their inspiration from now-deprecated (that is, soon-to-be-deleted) HTML tag attributes that used to be the only way to control visual aspects of elements. Visual properties, such as element alignment, belong in style sheet rules, rather than align or valign attributes inside an element tag. In some cases, style sheet rules even supplant entire HTML elements. For example, in the world of CSS, you do not direct font changes for a string of text within a paragraph by way of <font> tags. Instead, you define the font characteristics for that special text in a style sheet rule and then associate the rule with a structural HTML element that surrounds the affected content.

The earliest browsers to support a substantial amount of CSS1 were Netscape Navigator 4 and Internet Explorer 4 (IE 3 implemented a smaller set of CSS1 properties). These early implementations exhibited numerous quirks in the ways the more complex style features work. This was especially true in Navigator 4 with respect to form controls and tables (inheritance rules frequently failed) and in all browsers in the area of CSS-produced element borders. You find much more thorough support for CSS1 and a healthy selection of CSS2 properties starting in IE 5 for the Macintosh, IE 5.5 for Windows, and Mozilla-based browsers, as well as Safari and recent versions of Opera. With such broad support among installed browsers, basic style sheet control of content formatting is deployed very commonly around the Web.

Speaking of "Quirks"

While the CSS specs were solidifying, modern browser makers found that the new standards didn't always mesh with their previous interpretations of the evolving standards. But the browsers also had to walk a fine line between supporting the terabytes of legacy HTML published on the Web and promoting the "right" way of marking up text according to present-day standards. To that end, most modern browsers allow your documents to dictate whether the browsers should behave the old, quirky way (so that your old CSS code continues to work the same way in the new browsers), or the new, standards-compatible way (and sometimes one in-between mode). The switch that toggles the browser between modes is the content of the <!DOCTYPE> element at the top of your HTML file..

That's not to say that interpretations of the CSS standard are identical across all browsers. Implementations of some details are notoriously problematic, requiring CSS designers to test extensively on a wide variety of browsers. It's not uncommon for large applications to serve up separately-designed style sheets based on the class of browser requesting a web page.

I.5.2. Element Positioning and Layering

Begun as a separate working group effort, Cascading Style Sheets-Positioning offered script authors much more in the way of interactivity on a page: more of the D in DHTML. Its inclusion into the CSS2 recommendation validated the techniques and user interface possibilities that positioning offers.

The basic notion of positioning is that an element can be placed in its own plane above the main document. The element lives in its own transparent layer, so it can be hidden, shown, precisely positioned, and moved around the page without disturbing the other content or the layout of the document. It was CSS-based positioning that first allowed overlapping of HTML elements.

As remarkable as these features sound, the syntax for turning an element into a positioned element is no more difficult than making an element's text appear in a color or bold font weight. A handful of CSS-P properties, described in Online Section V, follow the same syntax conventions as other CSS properties.

By controlling position-related properties of an element, a script can make elements fly around the page or it can allow the user to drag elements around the page. Content can pop up out of nowhere or expand to let the viewer see more contentall without reloading the page or contacting the server. Scripted positioning with nearly identical cross-browser syntax is possible starting with IE 5 (Windows and Mac), Mozilla, Safari, and Opera 4.

(Implemented only in Netscape 4.x, the layer element and associated scripting was abandoned in favor of CSS positioning for the Mozilla project. Reference chapters in this book list these old Netscape 4-only items for historical purposes only.)