CSS: The Missing Manual

Styling Groups of Tags

Sometimes you need a quick way to apply the same formatting to several different elements. For example, maybe you'd like all the headers on a page to share the same color and font. Creating a separate style for each header—h1, h2, h3, h4 and so on—is way too much work, and if you later want to change the color of all of the headers, then you have six different styles to update. A better approach is to use a group selector. Group selectors let you apply a style to multiple selectors at the same time.

Constructing Group Selectors

To work with selectors as a group, simply create a list of selectors separated by commas. So to style all of the heading tags with the same color, you can create the following rule:

	h1, h2, h3, h4, h5, h6 { color: #F1CD33; }

This example consists of only tag selectors, but you can use any valid selector (or combination of selector types) in a group selector. For example, here's a selector that applies the same font color to the <h1> tag, the <p> tag, any tag styled with the .copyright class, and the tag with the #banner ID.

	h1, p, .copyright, #banner { color: #F1CD33; }

Note

If you want a bunch of page elements to share some but not all of the same formatting properties, then you can create a group selector with the shared formatting options, and individual rules, with unique formatting, for each individual element. The ability to use multiple styles to format a single element is a powerful CSS feature. See Chapter 5 for details.

The Universal ...