Defining Classes for Any Tag

Using a class selector gives you the ability to set up an independent style that you can then apply to any HTML tag.

Unlike an HTML selector, which automatically targets a specific tag, a class is given a unique name that is then specified using the style attribute in the HTML tag or tags you want to use it in.

Figures 2.14 and 2.15 show the general syntax of a CSS class rule. In this example (Figure 2.16), two classes have been set up to define how the chapter name (.chapterName) and the author name (.authorName) should be styled, although the .authorName class can only be applied to the paragraph tag.

Figure 2.14. The general syntax of a CSS rule using a class selector.

Figure 2.15. The general syntax of a dependent class selector rule.

Figure 2.16. Classes are used to style the chapter name, the name of the author, and to create the drop box embedded in the first paragraph with an image and caption.

To define a class selector:

.chapterName {...}

Type a period (.) and a class name; then open and close your declaration block with curly brackets ({}) (Code 2.9).

Code 2.9. A class style can be set up to be applied to any HTML tag, as with `copy`, or only to specific HTML tags.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Defining Class Selectors to Create Your Own Tags</title> <style type="text/css" media="all"> body {      font: 1.2em Georgia, 'Times New Roman', times, serif;      color: #000000; background-color: #fff;      margin: 8px; } .chapterName {      font-size: smaller;      display: block;      margin-bottom: 8px;      color:red; }      p.authorName {      font-size: 1em;      font-family: Arial, Helvetica, sans-serif;      font-weight: bold;      margin: 8px 0px;      color: red; } .dropBox {      width: 208px;      font: bold smaller Arial, Helvetica, sans-serif;      padding: 6px;      border: 3px solid #f00;      margin: 0px 0px 8px 8px;      float: right; } </style> </head> <body> <div > <div >      <h1>Alice's Adventures in Wonderland</h1>      <p >Lewis Carroll</p>      <h2>Chapter III<br />        <span >A Caucus-Race and a Long Tale </span>      </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice09a.gif" height="236" width="200" alt="Alice" /> 'Of course,' the Dodo replied very gravely. 'What else have you got in your pocket?' he  went on, turning to Alice. </div> <p>They were indeed a queer-looking party that assembled on the bank...</p> </div></div> </body></html>

CSS rules can be defined within the style tags in the head of your document (see "Adding Styles to a Web Page" earlier in this chapter) or in an external CSS file that is then imported or linked to the HTML document (see "Adding Styles to a Web Site" earlier in this chapter).

The class name can be anything you choose, with the following caveats:

Use only letters and numbers. Hyphens and underscores can be used, but with caution. Some earlier browsers (notably Netscape 4) reject them.
The first character cannot be a number.
Don't use spaces.

chapterName is an independent class, so you can use it with any HTML tag you want, with one stipulation: The properties set for the class must work with the type of tag you use it on.

font-size: smaller;

Within the brackets, type your declaration(s) to be assigned to this classformatted as property: valueusing a semicolon (;) and separating individual declarations in the list. You can also add one or more line breaks, spaces, or tabs after a declaration without interfering with the code to make it more readable.

p.authorName {...}

You can also create dependent classes, which tie the declarations of the class to a particular HTML tag.

authorName is a dependent class and will only be applied to paragraph tags using .

In the same document, you can create different versions of the dependent class (using the same name) for different tags and also have an independent class (applied to all tags with the class), as shown in Step 1.

<p >...</p>

Add the class attribute with the class name and its value to the tags to which you want to apply the class. Notice that when you defined the class in the CSS, it began with a period (.). However, you do not use the period when referencing the class name in an HTML tag.

Tips

You can mix a class with ID and/or inline rules within an HTML tag (see "Adding Styles to an HTML Tag," earlier in this chapter, and the following section, "Defining ID Selectors to Identify an Object").
Because they have no preexisting properties, you can use div and span tags to create your own HTML tags by adding classes. However, use these sparingly, since once they are associated, you are locked into using those specific classes with those specific locations.
A class name cannot be a JavaScript reserved word. Refer to this book's Web site (webbedenvironments.com/css_dhtml_ajax) for the list.

Figure 2.14. The general syntax of a CSS rule using a class selector.

Figure 2.15. The general syntax of a dependent class selector rule.

Figure 2.16. Classes are used to style the chapter name, the name of the author, and to create the drop box embedded in the first paragraph with an image and caption.

Code 2.9. A class style can be set up to be applied to any HTML tag, as with copy, or only to specific HTML tags.

Code 2.9. A class style can be set up to be applied to any HTML tag, as with `copy`, or only to specific HTML tags.