Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Selectors 165

8

You can also use selectors that are applied only to elements that have all of the classes
specified for a rule. For example, you can set up three selectors like this:

.yellow { color: yellow; }
.blue { color: blue; }
.yellow.blue { color: green; }

The paragraph that follows would be green because it has the class blue and the class
yellow:

My green paragraph.

What Cascading Means

You may be wondering where the cascading in Cascading Style Sheets comes from.
They are so named because styles cascade from parent elements to their children. To
override a style that has been applied via cascading, you just need to set the same prop-
erty using a more specific selector.

Here’s an example style sheet that will illustrate how cascading works:

body { font-size: 200%; }
div { font-size: 80%; }
p { font-size: 80%; }
span.smaller { font-size: 80%; font-weight: bold; }
#smallest { font-size: 80%; font-weight: normal; }

Figure 8.1 shows what the page looks like when that style s heet is applied to the follow-
ing HTML:

Input ▼

<p>This test is in a paragraph.</p>

One common mistake is to include the. when assigning classes

or the # when assigning IDs. The punctuation should only be

used in the style sheet. In the attributes, leave them off. So

id="primary" is correct; id="#primary" is not.

CAUTION