Skip to Main Content
CSS: The Missing Manual
book

CSS: The Missing Manual

by David Sawyer McFarland
August 2006
Beginner to intermediate content levelBeginner to intermediate
496 pages
17h 36m
English
O'Reilly Media, Inc.
Content preview from 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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

CSS: The Missing Manual, 2nd Edition

CSS: The Missing Manual, 2nd Edition

David Sawyer McFarland
JavaScript: The Missing Manual

JavaScript: The Missing Manual

David Sawyer McFarland

Publisher Resources

ISBN: 0596526873Supplemental ContentErrata Page