Section 3.1. Tag Selectors: Page-Wide Styling

3.1. Tag Selectors: Page-Wide Styling

Tag selectorssometimes called type selectorsare 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 HTMLjust 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 just such a tool class selectors , described next .