HTML and CSS Reference
In-Depth Information
Grouping Selectors
You can also group selectors together to avoid writing the same declaration block over and
over again. For example, if all your headers are going to be bold and orange, you could do this:
h1 {
color: orange; font-weight: bold;
}
h2 {
color: orange; font-weight: bold;
}
h3 {
color: orange; font-weight: bold;
}
h4 {
color: orange; font-weight: bold;
}
h5 {
color: orange; font-weight: bold;
}
h6 {
color: orange; font-weight: bold;
}
Or, for more efficiency, you could comma-separate your selectors and attach them all to a single
declaration block, like this:
h1, h2, h3, h4, h5, h6 {
color: orange; font-weight: bold;
}
Obviously this is much more efficient to write, and easier to manage later, if you decide you
want all your headers green instead of orange.
Summary
CSS selectors range from simple to complex, and can be incredibly powerful when you begin
to understand them fully. The key to writing efficient CSS is taking advantage of the hierarchi-
cal structure of (X)HTML documents. This involves getting especially friendly with descendant
selectors. If you never become comfortable with the more advanced selectors, you'll find you
write the same style rules over and over again, and that you add way more classes and IDs to
your markup than is really necessary.
Another key concept of CSS is that of specificity and the cascade. We'll cover that topic in
our next chapter.
