Classes | Dynamic HTML in Action

CSS supports the creation of classes. Put simply, a class is a variation of an existing element. For example, suppose you want to use the <B> tag throughout your document, but you want slight variations depending on where each tag is used. As demonstrated in Code Listing 11-11, you can create classes of B elements that have the style variations you want. B elements normally appear in boldface black type. A class simply adds its own formatting to the tag. Thus, in our example, every B element remains boldface, but the class modifies the font size of specific B elements, as indicated in Figure 11-11.

Code Listing 11-11.

 <HTML> <HEAD> <TITLE>Listing 11-11</TITLE> <STYLE>   B.large {font-size: 24pt}   B.small {font-size: 8pt} </STYLE> </HEAD> <BODY> <B>This is a standard B.</B> <B CLASS="small">This uses the small class.</B> <B CLASS="large">This uses the large class.</B> </BODY> </HTML>

click to view at full size.

Figure 11-11. Only the font size is changed by the B classes.

A class is defined by a selector name followed by a period and the class name (B.large, for instance). A value is then assigned to the class, using a statement enclosed in curly braces. No current browser allows more than one class level per tag—that is, the class B.large.bold is not allowed. You apply a class to an element with the CLASS attribute, as seen in the <B> tags in Code Listing 11-11.

You can create a global class that is usable by all elements if you do not specify a particular tag as a selector. Global classes are a powerful feature because they can be used for any tag on a page, as shown in Code Listing 11-12. Figure 11-12 shows the results.

Code Listing 11-12.

 <HTML> <HEAD> <TITLE>Listing 11-12</TITLE> <STYLE>   .large {font-size: 24pt}   .small {font-size: 8pt} </STYLE> </HEAD> <BODY> Standard text. <H2 CLASS="small">The small class on an H2 element.</H2> <SPAN CLASS="large">The large class on a SPAN element.</SPAN><BR> <P CLASS="small">The small class on a P element.</P> <B CLASS="large">The large class on a B element.</B><BR> </BODY> </HTML>

click to view at full size.

Figure 11-12. All types of elements can be affected by a global class.