elements. As with class rules, browsers don’t apply id rules unless you specifically tell them to in your HTML. Instead of switching on the rules with a class attribute, however, you do so with the id attribute. For example, here’s a

element that uses the Menu style:

At this point, you’re probably wondering why you would use an id selector—after all, the id selector seems almost exactly the same as a class selector. But there’s one difference: You can assign a given id to just one element in a page. In the current example, that means you can label only one

with the Menu id. This restriction doesn’t apply to class names, which you can reuse as many times as you like. The id selector is a good choice if you want to format a single, never-repeated element on your page. The advantage here is that the id selector clearly indicates the special importance of that element. For example, if a page has an id selector named Menu or NavigationBar, the web designer automatically knows that the page features only one menu or navigation bar. Of course, you never need to use an id selector. Some web designers use class selectors for everything, whether the section is unique or not. It’s really just a matter of personal preference. 148

creating a website: the missing manual

Colors

Note: You’ll learn about one more type of selector—contextual selectors—at the end of this chapter (page 180). But for now, it’s time to shift focus. In the next sections, you’ll capitalize on your hard-won stylesheet knowledge by learning about the dozens of formatting properties you can change.

Colors It isn’t difficult to inject some color into your web pages. Style sheet rules have two color-related properties, listed in Table 6-1. You’ll learn about the types of values you can use when setting colors (color names, color codes, and RGB values) in the following sections. Table 6-1. Color properties.

Property

Description

Common Values

Can Be Inherited?

color

The color of the text. This is a handy way to make headings or emphasized text stand out.

A color name, color code, or RGB color value.

Yes

backgroundcolor

The color behind the text for just that element.

A color name, color code, or RGB color value. You can also use the word “transparent.”

No1

The background-color style property doesn’t use inheritance (page 145). If you give the section of a page a blue background and you then place a heading on the page, the heading doesn’t inherit the blue background. However, there’s a trick. If you don’t explicitly assign a background color to an element, its color is transparent. This means the color of the containing element shows through, which has the same effect as inheritance. So the heading in this example still ends up with the appearance of a blue background.

1

The color property is easy to understand; it’s the color of your text. The backgroundcolor property is a little more unusual. If you apply a background color to the element of a web page, the whole page adopts that color, as you might expect. However, if you specify a background color for an individual element, like a heading, the results are a bit stranger. That’s because CSS treats each element as though it were enclosed in an invisible rectangle. When you apply a background color to an element, CSS applies that color to just that rectangle. For example, the following style sheet applies different background colors to the page, its headings, its paragraphs, and any bold text: body { background-color: yellow; } h1 { color: white; background-color: blue; }

chapter 6: style sheets

149

Colors p { background-color: lime; } b { background-color: white; }

Figure 6-5 shows the result. Figure 6-5: If you apply a background color to an element like