 |  |
1.5. Style Sheets
A style sheet contains definitions of how content should be rendered 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 (such as 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 identifier is associated with the style. That's how the separation of style 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.
Just as the current XHTML effort embraces modularization, so does CSS. The recommendation known as CSS3 is a modularized version of CSS2. Given the enormous size and range of style attributes in CSS2, modularization provides browsers an opportunity to claim support for well-defined subsets of the CSS2 recommendation, without supporting features that don't apply to the devices they support. For example, CSS2 contains many attributes that control how content should sound when delivered on a client device employing synthesized speech. One attribute defines whether the sequence of numerals "123" should be spoken as "One two three" or "One hundred twenty-three." This kind of style attribute is meaningless for a browser designed to render on a video display for sighted users. See Chapter 7 for more information about CSS3 modules. Chapter 11 provides a complete reference for CSS style attributes.
1.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 type (such as all p elements). Style rules influence the rendering of elements, including their color, alignment, border, margins, and padding between borders and the content. Style rules can also control specialty items, such as whether an ol element uses letters or roman numerals as item markers. CSS defines a full syntax for assigning style attributes to rules.
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 absurd 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.
On their own, style sheets are not dynamic. They simply set rules that guide the browser in rendering content as a page loads. But scripts can change style rules after a page has loaded. Of course, the browser must be constructed to allow such on-the-fly changes. I'll have more to say about that in the section on the document object model.
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 attributes). These early implementations exhibit numerous quirks in the ways the more complex style features work. This is especially true in Navigator 4 with respect to form controls and tables (inheritance rules frequently fail) 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 attributes starting in IE 5 for the Macintosh, IE 5.5 for Windows, and Netscape 6 (for all operating-system platforms). With such broad support among installed browsers, basic style sheet control of content formatting is deployed very commonly around the Web.
Speaking of "Quirks"
The convergence of W3C standards and releases of the Version 6 browsers from Microsoft and Netscape have given the browser makers a chance to atone for their most egregious past implementation sins. But the browsers must also walk a fine line between supporting the terabytes of legacy HTML currently published on the Web and promoting the "right" way of marking up text according to present-day standards. To that end, both IE 6 and Netscape 6 let your documents dictate whether the browsers should behave the old, quirky way (so that your old code—but not the NN 4 layer element—continues to work the same way in the new browsers), or the new, standards-compatible way. The switch that toggles the browser between modes is the content of the <!DOCTYPE> element, which must be the very first line of your HTML file. Chapter 8 covers this element in detail, but the impact of your choice also affects numerous CSS characteristics, as described throughout Chapter 11.
1.5.2. Element Positioning and Layering
Begun as a separate working group effort, Cascading Style Sheets-Positioning offers script authors much more in the way of interactivity on a page: more of the D in DHTML. Its inclusion into the CSS2 recommendation validates the techniques and user interface possibilities that positioning offers.
The basic notion of positioning is that an element or group of elements 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 attributes, described in Chapter 4, follow the same syntax conventions as other CSS attributes.
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 content—all without reloading the page or contacting the server. Scripted positioning with nearly identical cross-browser syntax is possible starting with IE 5 and Netscape 6.
The Netscape 4 Layer—R.I.P.
Prior to the release of the CSS-P recommendation, Netscape had been lobbying the W3C to adopt a different technique for handling content positioning, involving both a new HTML tag and a scriptable object. Navigator 4 implemented the <layer> tag (and a corresponding scriptable layer object). A Netscape layer is conceptually the same as a CSS-P layer, except that Netscape wanted to make it a part of the HTML syntax as well.
Unfortunately for Netscape and Navigator 4, the W3C did not adopt the <layer> tag for HTML 4.0, preferring to make layering a part of CSS. In the effort to make the next browser generation as standards-compliant as possible, the group responsible for future development of the Netscape browser (the Mozilla group) made the difficult but correct decision to abandon the <layer> tag. Thus, the element and the way scripts reference that element, work only in Navigator 4. The need to support this syntax diminishes each day, as Navigator 4 browsers retire from the installed base in favor of Mozilla-based browsers, IE, or other modern browsers.
|  | |
| 1.4. XHTML |  | 1.6. Document Object Model |
Copyright © 2003 O'Reilly & Associates. All rights reserved.