HTML and CSS Reference
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.
<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">
And the lounge in Seattle
has its own tweaks in its
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
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
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