Creating a Website: The Missing Manual, 3rd Edition

More Powerful Selectors

So far, you’ve seen style sheet rules that apply to every occurrence of a specific HTML element. The selectors in these universal styles are known as type selectors.

Type selectors are powerful, but not that flexible. Sometimes you need a way to modify just one section of your HTML document or even just a single element. You could use inline styles and put the formatting in the actual element tag itself, but that’s messy. Fortunately, style sheets provide two practical solutions to this problem: class selectors and id selectors.

Class Selectors

Class selectors are one of the best style sheet tricks around. First, you single out specific elements in your page by giving them the same class name. Then, you tell your browser to apply formatting to all the elements that carry that class name.

To try this out, begin by choosing a descriptive class name. You can pick whatever name you want, as long as you stick to letters, digits, and dashes, and make sure that the first character is always a letter. The following example uses the class name FancyTitle.

Once you’ve chosen a class name, you need to define a rule for the class in your style sheet. This rule looks like any other, except that instead of using a tag name as the selector, you use the class name, preceded by a period (.).

.FancyTitle {
  color: red;
  font-weight: bolder;
}

So how does a browser know when to apply a rule that uses a class selector? Browsers never apply class rules automatically; you have to add the ...