CSS: The Missing Manual

Chapter 3. Selector Basics: Identifying What to Style

Every CSS style has two basic parts: a selector and a declaration block. (And if that's news to you, go back and read the previous chapter.) The declaration block carries the formatting properties—text color, font size, and so on—but that's just the pretty stuff. The magic of CSS lies in those first few characters at the beginning of every rule—the selector. By telling CSS what you want it to format (see Figure 3-1), the selector gives you full control of your page's appearance. If you're into sweeping generalizations, then you can use a selector that applies to many elements on a page at once. But if you're a little more detail oriented (OK, a lot more), other selectors let you single out one specific item or a collection of similar items. CSS selectors give you a lot of power: This chapter shows you how to use them.

Figure 3-1. The first part of a style, the selector, indicates the element or elements of a page to format. In this case, h1 stands for "every heading 1 or <h1> tag on this page."

Note

If you'd rather get some hands-on experience before studying the ins and outs of CSS selectors, then jump to the tutorial in Section 3.1.

Tag Selectors: Page-Wide Styling

Tag selectors—sometimes called type selectors—are extremely efficient styling tools, since they apply to every occurrence of an HTML tag on a Web page. With them, you ...