Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

With what you have learned so far, you can probably handle most of the style sheet challenges that come your way. Be aware, however, that both the CSS and JavaScript approaches support some more advanced techniques. These include the following:

•  Setting up different classes of the same element

•  Creating a named style that you can apply to any element

•  Selecting an element based on context

•  Making use of block-level styles

Each of these points is covered in the sections that follow, with emphasis on the JavaScript implementation of each.

	TROUBLESHOOTING
	My JavaScript code is not working in Netscape Navigator and I can’t tell what the error is!
	Make sure that JavaScript is enabled in your Netscape Navigator. You can do this by choosing Edit, Preferences, and then clicking the Advanced item in the category listing in the Preferences dialog box. After you do this, you will see a list of check box options. Make sure that the check box labeled Enable JavaScript is checked. Then click OK.
	Because Netscape is capable of processing JavaScript, you should find that the next time you load your JavaScript document, Netscape will interpret the script code and note in a pop-up dialog box any syntax errors it finds. The error messages are usually very specific and should help you clean up your code.

Setting Up Style Classes

Suppose you assign the following style characteristics to the <H1> element:

<STYLE TYPE=“text/javascript”>
with (tags.H1) {
   backgroundColor=“black”;
   color=“white”;
   fontSize=“36pt”;
   lineHeight=“40pt”;
   align=“center”;
   width=“100%”;
}
</STYLE>

Using the preceding code, each level 1 heading would appear centered in a black box that is 40 points high and spans the width of the browser screen. The text of the headline would be 36 points high and rendered in white. But what if you don’t want every level 1 heading to look like this? Suppose you want some of them to be in yellow on a red background so that they are more prominent. In that case, you can define two classes of the H1 element style—one for the white on black heading and one for the yellow on red.

Classes are set up using the JavaScript classes object. To set up the two types of level 1 headings just discussed, for example, you could use this code:

<STYLE TYPE=”text/javascript”>
with (tags.H1) {
   fontSize=“36pt”;
   lineHeight=“40pt”;
   align=“center”;
   width=“100%”;
}
classes.whiteOnBlack.H1.backgroundColor=“black”;
classes.whiteOnBlack.H1.color=“white”;
classes.yellowOnRed.H1.backgroundColor=“red”;
classes.yellowOnRed.H1.color=“yellow”;
</STYLE>

The with operator makes all level 1 headings 36 point on 40 point, centered, and the full width of the browser screen. The last four lines of code define the two classes: whiteOnBlack, which produces white text on a black background; and yellowOnRed, which produces yellow text on a red background. With the two classes defined, you can invoke one class or another by using the CLASS attribute in the <H1> tag as follows:

<H1 CLASS=“yellowOnRed”>Yellow headline on red background</H1>
<H1 CLASS=“whiteOnBlack”>White headline on black background</H1>

The one limitation in the way the classes are set up is that they can be used only with the H1 element. If you want your classes applicable to more than just the H1 element, you could duplicate the code for the other elements you want to use the classes with, or you could make the classes available to every element by using the all object as follows:

classes.whiteOnBlack.all.backgroundColor=“black”;
classes.whiteOnBlack.all.color=“white”;
classes.yellowOnRed.all.backgroundColor=“red”;
classes.yellowOnRed.all.color=“yellow”;

The preceding code makes the whiteOnBlack and yellowOnRed classes available to all HTML elements, not just H1. If you don’t want to apply either class to an element, don’t use a CLASS attribute with that element.

---

NOTE:  The properties assigned in these classes are only applicable to block-level formats such as headings, paragraphs, blockquotes, and lists. Trying to apply the classes to text-level formatting tags would have no effect.

---

---

CAUTION:  

You can only specify one CLASS per HTML tag. If you put multiple CLASS attributes in a tag, Netscape Navigator uses the first one it encounters and ignores the rest.

---

Setting Up Named Styles

Besides creating classes of the same tag, you can also create a specific named style that you can build into any tag. The JavaScript ids object enables you to set up the named style, and then the style can be referenced by any tag using the ID attribute.

As an example of a named style, consider the following code:

<STYLE TYPE=“text/javascript”>
ids.allCaps.textTransform=“uppercase”;
ids.bigText.fontSize=“125%”;
</STYLE>

After executing the script code, Navigator recognizes two named styles: allCaps, which transforms all text to uppercase; and bigText, which magnifies text to 125% of its default size. If you had a paragraph you wanted to appear in all uppercase letters, you could set it up with this:

<P ID=“allCaps”>This paragraph is all uppercase letters...</P>

Suppose you still had the whiteOnBlack and yellowOnRed classes available to you from the preceding section. You could then use a class and a named style together as follows:

<H1 CLASS=“yellowOnRed” ID=“allCaps”>
   Yellow Uppercase Heading on Red Background
</H1>

One popular effect on Web pages is small caps —text that is all in uppercase and the first letter of each word is larger than the rest of the letters in the word. You can accomplish this with the two named styles already defined, but you have to use the <SPAN> tag to apply the bigText style. For example:

<H1 CLASS=“whiteOnBlack” ID=“allCaps”>
<SPAN ID=“bigText”>V</SPAN>ery
<SPAN ID=“bigText”>I</SPAN>mportant
<SPAN ID=“bigText”>S</SPAN>tory!
</H1>