Chapter 2. 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 are there for everyone to see.
Of course, CSS can’t solve all your problems—you can’t use it to change the color of your GIFs, for example—but it can make some global changes much easier. So let’s begin with selectors and structure.
I’ve 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
COLOR="gray">...</FONT> tags in all your
<h2><font color="gray">This is h2 text</font></h2>
Obviously, this is a tedious process if your document contains a lot
h2 elements. Worse, if you later decide that
you want all those
h2s to be green instead of gray, you’d have to start the manual tagging ...