Selectors - Selectors, Specificity, and the Cascade - page 1

CHAPTER 1
Selectors
One of the primary advantages of CSS—particularly to designers—is its ability to easily
apply a set of styles to all elements of the same type. Unimpressed? Consider this: by
editing a single line of CSS, you can change the colors of all your headings. Don't like
the blue you're using? Change that one line of code, and they can all be purple, yellow,
maroon, or any other color you desire. That lets you, the designer, focus on design,
rather than grunt work. The next time you're in a meeting and someone wants to see
headings with a different shade of green, just edit your style and hit Reload. Voilà! The
results are accomplished in seconds and there for everyone to see.
Of course, CSS can't solve all your problems—you can't use it to change the colorspace
of your PNGs, for example, at least not yet—but it can make some global changes much
easier. So let's begin with selectors and structure.
Basic Style Rules
As stated, a central feature of CSS is its ability to apply certain rules to an entire set of
element types in a document. For example, let's say that you want to make the text of
all h2 elements appear gray. Using old-school HTML, you'd have to do this by inserting
<FONT COLOR="gray">...</FONT> tags in all your h2 elements:
<h2><font color="gray">This is h2 text</font></h2>
Obviously, this is a tedious process if your document contains a lot of h2 elements.
Worse, if you later decide that you want all those h2 s to be green instead of gray, you'd
have to start the manual tagging all over again. (Yes, this is really how it used to be done!)
CSS allows you to create rules that are simple to change, edit, and apply to all the text
elements you define (the next section will explain how these rules work). For example,
simply write this rule once to make all your h2 elements gray:
h2 {color: gray;}
If you want to change all h2 text to another color—say, silver—simply alter the value:
h2 {color: silver;}