Dynamic Styles

Like JavaScript, Cascading Style Sheets are their own in-depth web authoring topic. Because our focus is on DHTML, we shall concentrate on the web authoring technologies.

The style sheet determines how, aesthetically, the document is rendered on the screen. 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 example, 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, 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.

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 , 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. Netscape's support for CSS via JavaScript is not useful nor dynamic, since changes applied to styles once the page has been rendered do not appear on-screen.