Section 3.5. Styling Groups of Tags

3.5. 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 onis 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.

3.5.1. 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.

---

3.5.2. The Universal Selector (Asterisk)

You can think of a group selector as shorthand for applying the same style properties to several different page elements. CSS also gives you a sort of ¼ber group selectorthe universal selector. An asterisk * is universal selector shorthand for selecting every single tag.

For example, say you want all the tags on your page to appear in bold type. Your group selector might look something like the following:

 a, p, img, h1, h2, h3, h4, h5 yadda yadda { font-weight: bold; } 

The asterisk, however, is a much shorter way to tell CSS to select all HTML tags on the page:

 * { font-weight: bold; } 

You can even use the universal selector as part of a descendent selector, so you can apply a style to all of the tags that descend from a particular page element. For example, # banner * selects every tag inside the page element to which you've applied the # banner ID.

Since the universal selector doesn't specify any particular type of tag, it's hard to predict its effect on an entire Web site's worth of pages all composed of a variety of different HTML tags. To format many different page elements, Web page gurus rely on inheritance a CSS trait discussed in depth in the next chapter.