Building a Web Site For Dummies®, 3rd Edition

Selectors, Classes, and IDs

Cascading Style Sheets — hmm — the style sheets part of that seems pretty obvious. Well, with a little struggle, maybe. I honestly cannot tell you why the inventors decided on sheets instead of files or some other more common term — that’s just one of life’s little mysteries. But the style part, at least, should be obvious: it’s a way of establishing the style (appearance) of your Web pages, giving you much more control than standard HTML does. The cascading part is, after a moment’s reflection on the way CSS works, also obvious: The style formatting flows from the top down, just the same as a waterfall or cascade does. (Perhaps its originators had a sheet of water in mind. . . .)

The preceding section describes three methods of adding CSS to your Web pages. The top in this case is a separate .css file, the next level down the cascade is a general style declaration and, at the bottom of the cascade, you find your inline styles. Each of these is interpreted in that order.

Whether you realize it, you’ve already learned about using selectors in CSS. A selector is simply the name of the element or elements that you’re altering. The H1 element that was used in the preceding examples, for instance, is a selector.

What if you don’t want to change all instances of an element, but just want to change some instances of them? That’s where classes and IDs come in. You create a class in either a style declaration in the HEAD element or in a separate .css file. The ...