HTML and CSS Reference
In-Depth Information
Figure 3-7.
Our example styled with element selectors
Next, let's duplicate our guinea pigs and wrap them in a
div
, allowing us to use a more
specific selector to style only the new pair (without the added rule in the CSS, the second set
of elements would look the same as the first). Our document and style sheet now contain the
following (the addition is shown in bold):
Markup
<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>
<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;
}
The new selectors are more specific, and thus apply only to the second set in our markup
(Figure 3-8).
