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 the next section on Tutorial: Selector Sampler.
Tag selectors—sometimes called type or element selectors—are extremely efficient styling tools, since they apply to every occurrence of an HTML tag on a web page. With them, you can make sweeping design changes to a page with very little effort. For example, when you want to format every paragraph of text on a page using the same font, color, and size, you merely create a style using p (as in the <p> tag) as the selector. In essence, a tag selector redefines how a browser displays a particular tag.
Prior to CSS, in order to format text, you had to wrap that text in a <font> tag. To add the same look to every paragraph on a page, you often had to use the <font> tag multiple times. This process was a lot of work and required a lot of HTML, making pages slower to download and more time-consuming to update. With tag selectors, you don't actually have to do anything to the HTML—just create the CSS rule, and let the browser do the rest.
Tag selectors are easy to spot in a CSS rule, since they bear the exact same name as the tag they style—p, h1, table, img, and so on. For example, in Figure 3-2, the h2 selector (top) applies some font styling to all <h2> tags on a web page (bottom).
Figure 3-2. A tag selector affects every instance of the tag on the page. This page has three <h2> tags (indicated by the black labels at the left edge of the browser window). A single CSS style with a selector of h2 controls the presentation of every <h2> tag on the page.
Note
As Figure 3-2 makes clear, tag selectors don't get the less than (<) and greater than (>) symbols that surround HTML tags. So when you're writing a rule for the <p> tag, for example, just type the tag's name—p.
Tag selectors have their downsides, however. What if you want some paragraphs to look different from other paragraphs? A simple tag selector won't do, since it doesn't provide enough information for a web browser to identify the difference between the <p> tags you want to highlight in purple, bold, and large type from the <p> tags you want to leave with normal, black text. Fortunately, CSS provides several ways to solve this problem—the most straightforward method is called a class selector.