HTML and CSS Reference
In-Depth Information
<div id="content" class="module">
<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
➥
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS
h1 {
color:#000;
}
p {
color:#000;
}
div h1 {
color:#333;
}
div p {
color:#333;
}
div.module h1 {
color:#666;
}
div.module p {
color:#666;
}
div#content h1 {
color:#999;
}
div#content p {
color:#999;
}
■
Note
A little specificity can go a long way: while
div#content
and
#content
may target the exact same
element in the markup, a rule with
div#content
is more specific, and will override any rule using just
#content
(without the preceding
div
). This applies to IDs (as in this example), classes, attribute selectors,
pseudo-classes, and pseudo-elements.
