CSS: The Missing Manual, 4th Edition

Chapter 3. Selectors: 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 ability to focus your styling on specific items 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 on Tutorial: Selector Sampler.

Type Selectors: Styling HTML Tags

Selectors used to style particular HTML tags are called type or element selectors. They are extremely efficient styling tools, ...