Cascading Style Sheets (6): The bitter end

This is it folks, the final installment of our romp through Cascading Style Sheets, Dynamic HTML and JavaScript for two reasons: The first is that if we dig much deeper, we could spend another six weeks on the topic – it really is a huge subject. …

This is it folks, the final installment of our romp through Cascading Style Sheets, Dynamic HTML and JavaScript for two reasons: The first is that if we dig much deeper, we could spend another six weeks on the topic – it really is a huge subject. Second – and most important – is that if we don’t change topic, our editor will hurt us.

Anyway, last week we asked what the following code will do in the presence of a Cascading Style Sheet applied to the page it is in. Here’s the inline CSS:

background: blue;

}

And here’s our code:

The color of danger is red!

The answer is nothing. The reason is that within the browser there are two object models at work: The DHTML Object Model, which provides access to any tag by name and ID, and the Document Object Model (DOM), which provides access to document elements. In this case the latter wins. Therefore, if we’re using CSS, then to change an attribute we have to start navigating the DOM. Here’s a function that goes in the head section of a document:

function changebgc(mycolor);

{

var doc = document.getElementsByTagName(“body”).item(0);

doc.style.backgroundColor = mycolor;

}

//–>

Now in the body add the following:

The color of water is blue!green!

The color of trees is

Clicking on the links will alternate the page’s background color (note that you can also specify the color numerically, such as ‘#ff00ff’, which will produce a rather nasty shade of puce).

Interestingly, if you don’t have a CSS applied and you use the first script it will work and the background will turn red. But once you set up an element using our changebc( ) function the DOM will be in effect, and the DHTML Object Model no longer applies.

If you want to examine the object models in a document you can use DOM Viewer, a really neat piece of JavaScript code by Mike Hall. You simply save the DOM Viewer code as an HTML file and then add a link as follows in the document you want to examine:

launch viewer.

This produces a separate window containing a hierarchical list of every element in the entire browser document. You can even specify a starting object to minimize the size of the display. This is a terrific learning tool.

CSS priorities

While any DOM changes you make through JavaScript will take precedence, there is an order of priority for all CSS specifications that will determine how the document is styled when first loaded – this is the cascade (more information).

These priorities, in descending order, start with the existence of the ! important value as in:

p {font-weight: normal ! important;}

This value overrides any other priorities. Next comes the author’s style sheet, then the user’s (optional), then the user agent’s (also optional).

After that comes how specific the CSS rule is (more information) followed by the last rule listed and finally by any existing or inherited properties.

As we said at the beginning, CSS is a big topic that we have only just scratched the surface of and we recommend the following books to assist you in your quest for CSS enlightenment: DHTML and CSS for the World Wide Web by Jason Cranford Teague; HTML for the World Wide Web by Elizabeth Castro; Designing with Style Sheets, Tables and Frames by Molly E. Holzschlag; JavaScript Unleashed by R. Allen Wyke and Jason Gilliam; and JavaScript Developer’s Dictionary by Alexander J. Vincent.

Happy stylin’! Formats to gearhead@gibbs.com.