Introduction to Dynamic HTML: Dynamic Styles

As we've seen, positioning a content block is a form of style sheet. However, there are other uses for style sheets aside from placing blocks on the page. Style sheets (aka Cascading Style Sheets or CSS) can be used to define any set of styles which may apply to certain HTML elements or block of HTML. Like JavaScript, Cascading Style Sheets are their own in-depth web authoring topic. Because our focus is on DHTML, insofar as it uses and combines web authoring technologies, this isn't the place for a detailed tutorial on creating styles or style sheets.

In brief, there are several ways to apply styles using style sheets. You can define styles which apply globally to all HTML elements of a certain type. For instance, you might create a style sheet which specifies that all <H3> elements be bold (font-weight) and red (color).

You may also define style "classes," which are predefined styles applied to an element on-demand. For example, you might specify that the style class "redbold" contains the styles bold (font-weight) and red (color). This redbold class would only apply to elements in which you demand it; e.g. <BLOCKQUOTE CLASS="redbold">.

Lastly, as you've already seen, you can define and apply styles on-the-fly, using the STYLE attribute for an element tag; e.g. <H4 STYLE="color:red; font-weight:bold;">. These on-the-fly styles apply only to the tag in which they are specified.

Both Microsoft and Netscape support CSS as described above, although Microsoft supports additional style properties which do not exist under Netscape. The critical difference between the browsers, however, is the degree to which their CSS support is dynamic.

Quasi-Dynamic HTML

The style sheet determines how, aesthetically, the document is rendered on the screen. Once rendered, though, can these styles be modified on-screen? This is where the two browsers diverge markedly.

Within Microsoft's Internet Explorer, you can, via JavaScript, modify many of the properties of a style sheet or an element's individual style. These changes will be immediately reflected on-screen -- so, if you changed the redbold class's color property to blue, any on-screen text using the redbold class will suddenly change to blue. Similarly, you can change any style property for those elements which possess inline ("on-the-fly") styles.

Netscape, on the other hand, is not so accommodating. While there is an interface to style sheets via JavaScript (albeit very different from the Microsoft implementation), you can only use JavaScript to define styles before they are rendered. By and large, this would be used as a slightly more flexible replacement for defining your styles rather than using standard CSS syntax. On the other hand, using standard CSS syntax would maintain compatibility between browsers. For this reason, it could be argued that Netscape's support for CSS via JavaScript is not terribly useful, and not at all dynamic, since changes applied to styles once the page has been rendered do not appear on-screen.

Stuck in the middle are we -- but because Microsoft's support for style modifications is far more robust, we will focus here on dynamic styles in MSIE. Hopefully the next version of Netscape will catch up in this regard.

Introduction to Dynamic HTML: Putting the D in DHTML
Introduction to Dynamic HTML
Introduction to Dynamic HTML: Inline Styles