HTML and CSS Reference
In-Depth Information
CAUTION
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=”pri-
mary”
is correct,
id=”#primary”
is not.
8
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 sheet is applied to the follow-
ing HTML:
Input
▼
<div>
This text is in a div but not in a paragraph.
<p>
This test is in a paragraph.
</p>
<p><span class=”smaller”>
This is in a span with the class “smaller”
inside a paragraph.
</span></p>
<p><span class=”smaller”><span id=”smallest”>
This text is in a
span with the ID “smallest”.
</span></span></p>
</div>
