CSS: The Definitive Guide, 5th Edition

Chapter 2. Selectors

One of the primary advantages of CSS 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.

This capability lets you, the author, focus on design and user experience rather than tedious find-and-replace operations. 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.

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. Before we had CSS, you’d have to do this by inserting <font color="gray">...</font> tags inside all your <h2> elements. Applying inline styles using the style attribute, which is also bad practice, would require you to include style="color: gray;" in all your <h2> elements, like this:

<h2 style="color: gray;">This is h2 text</h2>

This will be 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 ...