Chapter 21. Cascading Style Sheets and CGI Programming

In this chapter, I'll take a look at working with Cascading Style Sheets (CSS). CSS and JavaScript connect well because styles are dynamic these days, which means you can change them on-the-fly , as we'll see in this chapter.

You set styles using style attributes for example, here's how I use the color style attribute to set the text color in a document to coral:

 <BODY STYLE="color: coral">          .          .          .  </BODY>

The exciting thing is that you can access style properties from JavaScript. We've already seen this at work to some extent. For example, here's Listing 16-01.html, which turns the color of text red when the cursor moves over it (if using Netscape Navigator, you'll need version 6.0 or later):

 <HTML>      <HEAD>          <TITLE>              Text Mouse Rollovers          </TITLE>      </HEAD>      <BODY>          <H1>              Text Mouse Rollovers          </H1>  <SPAN ONMOUSEOVER="this.style.color='red'"   ONMOUSEOUT="this.style.color='black'">   This text changes color when the mouse is over it.   </SPAN>  </BODY>  </HTML>

This works because, using JavaScript, we have access to the CSS color style attribute of the <SPAN> element that encloses the text whose color we want to change. Just like HTML attributes, we also can work with style attributes, which become properties in JavaScript. You use style attributes in style sheets and inline HTML STYLE attributes, and you use the corresponding style properties in JavaScript code.

Here's an example. Suppose that we have a <SPAN> element and that we want to make sure the color of text in the element is black. We can set that color with the style color attribute like this:

 <SPAN NAME="span1" STYLE="color: black">Hello from JavaScript!</SPAN>

The color style attribute becomes the color property of the <SPAN> element's style object in JavaScript. To access this property, you can use JavaScript syntax with the color property like this, turning the text red:

 document.all.span1.style.color = "red"

In this way, you can access the individual style attributes in JavaScript as style propertiesin this case, the color style attribute became the color style property in code. It's almost that easy for all CSS style attributes, except for one thingmany style attributes have hyphenated names , such as text- decoration (which sets text "decoration" such as underliningsetting this property to "none" for hyperlinks will remove their underlining, for example). JavaScript, however, does not allow names with hyphens, so the style attribute text-decoration becomes the style property textDecoration property in JavaScript. That's how it worksit you want to use a hyphenated style attribute in code, change it by removing the hyphen(s) and using the standard JavaScript capitalization scheme.

CSS is a specification of the World Wide Consortium (W3C), and we're going to take a look at both Cascading Style Sheets specification 1 (named CSS1) and 2 (named CSS2) here. Parts of both specifications are supported by both browsers, and of course, I'll list which style attributes are supported in which browser. (You also can find more information online, such as at http://www.webreview.com/style/css1/ charts /mastergrid.shtml.) Note, however, that there are far too many style attributes to cover them all here, so I'll be looking at only the most common, and the most powerful, style sheet attributes in this chapter.

Tip

You'll find the complete listing of the CSS1 and CSS2 specifications at http://www.w3.org/TR/REC-CSS1 for CSS1 and http://www.w3.org/TR/REC-CSS2 for CSS2. You can find all the style sheet attributes there (but not which browser supports which attributes).

Using CSS is something that many JavaScript programmers are not very familiar with, so in this chapter I'll take a brief look at the ways you connect styles to elements first, then what style attributes there are, and then dig into many examples to make what you can do clear.