Style Classes | Inside JavaScript

You also can create style classes , which contain all kinds of style rules. You can then apply those styles to elements by using the CLASS attribute of those elements.

Here's an example where I'm creating a style class named underlinedText that underlines the text of elements to which you apply it. To indicate I'm creating a class, I start the class name with a dot (.) in the <STYLE> element, and then I can use that class with the CLASS attribute of a <SPAN> element:

(Listing 21-04.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Style Classes          </TITLE>  <STYLE>   .underlinedText {text-decoration: underline}   </STYLE>  </HEAD>      <BODY>          <H1>              Style Classes          </H1>  <SPAN CLASS="underlinedText">   This text is underlined.   </SPAN>  </BODY>  </HTML>

In fact, we've already put style classes to work in Chapter 17, "Dynamic HTML: Drag and Drop, Data Binding, and Behaviors," when we used Internet Explorer behaviors. Here's Listing 17-11, which creates a style class named class1 that uses the behavior glower.htc:

 <HTML>      <HEAD>          <TITLE>              Internet Explorer Behaviors          </TITLE>  <STYLE>   .class1 {font-size:36pt; font-weight:bold;   color:white; position:absolute; cursor:hand;   filter:glow(enabled=0);behavior:url(glower.htc)}   </STYLE>  </HEAD>      <BODY BGCOLOR="BLACK">          <H1 STYLE="color:white">              Internet Explorer Behaviors          </H1>  <DIV CLASS="class1" STYLE="top:100; left:40">   Move the mouse over this text.   </DIV>  </BODY>  </HTML>

There are other ways to assign styles to HTML elements, but we've seen the principal ways hereusing inline styles with the HTML STYLE attribute, using embedded style sheets with the <STYLE> element, using external style sheets with the <LINK> element, and creating style classes you use with the HTML CLASS attribute.

The next step is to see what style attributes are available. There are hundreds of them; and instead of just listing them after another, it's a good idea to get some overview first; so I'll do that now. Note that this is just an overview. We'll see the possible values you can set these style attributes to later in this chapter.