Dynamic HTML: The Definitive Reference

Style Sheets

A style sheet is a definition 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.

The standardization efforts for style sheets are still trying to establish themselves, despite the fact that some versions have already been published. At the time the Version 4 implementations of Navigator and Internet Explorer were under construction, there were two separate, but related, style sheet efforts underway: Cascading Style Sheets Level 1 (CSS1) and Cascading Style Sheets-Positioning (CSS-P). The CSS-P functionality is being blended into the primary specification for the next version of CSS, Cascading Style Sheets Level 2 (CSS2). All CSS standards activity is under the auspices of the W3C (http://www.w3c.org/Style/). Chapter 10, provides a complete reference for all the style attributes available in CSS1 and CSS2.

CSS1

The Cascading Style Sheets Level 1 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. CSS1 defines a full syntax for assigning style attributes to rules.

CSS frees you from the tyranny of the pixel and the arbitrary way that each browser measures fonts and other values. Font sizes can be specified in real 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.

Many of the style specifications that go into CSS rules derive their inspiration from existing HTML tag attributes that control visual aspects of elements. In some cases, style sheet rules even supplant entire HTML elements. For example, in the world of CSS, font changes within a paragraph are not done with <FONT> tags. Instead, a style sheet rule sets the font, and the style rule is assigned to structural HTML elements (perhaps <SPAN> tags) that surround the affected content.

On their own, style sheets as described in the CSS1 specification are not dynamic. They simply set rules that are followed as a page loads. But under script control, there is the possibility of changing a style rule 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.

Netscape Navigator 4 implements most of the CSS1 specification. In addition to the standard CSS1 rule specification syntax, Navigator offers authors an alternate syntax (based on JavaScript) to assign style sheet rules to elements. We’ll talk more about this alternate syntax in Chapter 3; for now it is important to understand that it is merely another way of specifying CSS1 functionality. Internet Explorer began supporting CSS1 in Version 3, although the functionality was little used by authors unless the target audience was using IE 3 exclusively. More complete support of the CSS1 specification is built into Version 4, but even in this version Microsoft has elected to omit a few features. The good news is that CSS1 functionality is largely the same in both IE 4 and Navigator 4, so we should start to see increased usage of style sheets on the Web.

CSS-P

Begun as a separate working group effort, Cascading Style Sheets-Positioning offers much more in the way of interactivity: more of the D in DHTML. The basic notion of CSS-P 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. For the first time, HTML elements can even overlap each other.

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.

As an add-on to the CSS1 effort, CSS-P functionality uses a syntax that simply extends the CSS1 vocabulary. CSS-P rules are embedded in documents the same way that CSS1 rules are embedded.

The W3C work on CSS-P wasn’t as far along as CSS1 was when Navigator 4 had to be put to bed. Moreover, Netscape had been lobbying the standards bodies to adopt a different technique for handling content positioning, involving both a new HTML tag and a scriptable object. Navigator 4 therefore implements the <LAYER> tag and a scriptable layer object. A Netscape layer is in most respects 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 <LAYER> tag was not adopted by the W3C for HTML 4.0, and it is not likely that it will be added in the future. Even so, if you are authoring for a Navigator-only audience, the LAYER element is a convenient way to work with positionable elements. While its existence may not be emphasized by Netscape in future browsers, it will certainly be available for backward compatibility with pages that use it.

The good news for authors, however, is that whether you create a positionable element via the CSS-P syntax or as a LAYER element, scripting the element on the fly is the same in Navigator. The Netscape layer object exposes most of the CSS-P properties for access via scripts.

In contrast, Internet Explorer 4 follows the CSS-P specification very closely. Including a single attribute (the position attribute) in a style sheet rule makes the element associated with that rule positionable.

The bad news for authors is that Microsoft’s way of working with positionable elements in scripts is different from Netscape’s way. All is not lost, however. Chapter 4, demonstrates ways to raise the common denominator of positionable element scripting for both browsers in the same document.

CSS2

In the next generation, Cascading Style Sheets Level 2, the work from the CSS-P group is being blended with the other style sheet specifications. Therefore, with the release of CSS2, there is no separate CSS-P specification. CSS2 also greatly expands on CSS1 by supporting style sheet functionality for a lot of the advanced work in HTML 4.0. Thus, you’ll find new style sheet attributes for electronic speech (aural style sheets) and more attributes designed to remove style burdens from HTML element attributes.

CSS2 is more recent than either Version 4 browser. Navigator 4 incorporates nothing yet from CSS2, and Internet Explorer 4 has only a smattering of CSS2 attributes built in. A lot of the new items added to CSS2 are optional, so there is no reason to expect a 100% implementation in any browser in the future.