HTML and CSS Reference
In-Depth Information
Using multiple stylesheets
So how do you start with a corporate style and then allow the division and
the lounge franchises to override and make changes to the styles? You use
several stylesheets, like this:
In your HTM
L, you can specify
more than
one stylesheet. Here,
we've got t
hree.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" href="corporate.css" rel="stylesheet">
<link type="text/css" href="beverage-division.css" rel="stylesheet">
<link type="text/css" href="lounge-seattle.css" rel="stylesheet">
</head>
<body>
.
.
.
</body>
</html>
And the lounge in Seattle
has its own tweaks in its
stylesheet.
Th e
b e
ve r a
g e d
i v i s
i o n
c a n
a d d
to
t h e
c o r
po r a
t e
st y l e
a
l it t l
e ,
o r
e ve n
o ve
r ri d
e s
o m e
o f
t h e
c o r
po r
at e
st y l
e s .
Order matters! A
stylesheet can overri
de
the styles in the
stylesheets linked ab
ove it.
Q:
So the order of the stylesheets
matters?
A:
Yes, they go top to bottom, with the
stylesheets on the bottom taking precedence.
So if you have, say, a font-family property
on the <body> element in both the corporate
and the division stylesheets, the division's
takes precedence, since it's the last one
linked in the HTML.
Q:
Do I ever need this for a simple
site?
A:
You'd be surprised. Sometimes there's
a stylesheet you want to base your page on,
and rather than changing that stylesheet,
you just link to it, and then supply your own
stylesheet below that to specify what you
want to change.
Q:
Can you say more about how the
style for a specific element is decided?
A:
We talked a little about that in Chapter
7. And for now, just add to that knowledge
that the ordering of the stylesheets linked
into your file matters. In the next chapter,
after you've learned a few other CSS details,
we're going to go through exactly how the
browser knows which style goes with which
element.
