Head First HTML with CSS

? brain
power
On a referral from the Starbuzz
CEO, you’ve been asked to
come in and consult on style
changes to PetStorz main
page. How quickly would you
understand the PetStorz Web
page if you were shown Page
One?
What about Page Two?
Adding some style
Okay, so you’ve added some logical
structure to the PetStorz page, and you’ve
also labeled that structure by giving each
a unique id. That’s all you need
to start styling the group of elements
contained in the .
Here we have two rules, one
for each . Each is
selected by an id selector.
#cats {
background-image: url(leopard.jpg);
}
#dogs {
background-image: url(mutt.jpg);
}
Page One
p
h1
h2
p
h2
p
p
img
Now the s
have a little style.
By setting the
background on the
, it also shows
through the elements
contained in the .
The elements in the will also
inherit some properties from the
, just as any child element
does (like font-size, color, etc).
Each rule sets the
background-image
property. For cats we
have a leopard image,
and for dogs we have
a mutt image.
p
Page Two
h1
div id=“cats”
p
h2
p
div id=“dogs”
p
h2
p
h1
div id=“cats”
p
h2
p
h2
p
divs and spans
img
div id=“dogs”
img
you are here 435