the box model
you are here
there are no
That’s pretty cool. So I can set
up different style sheets for different
Yes, you can set up several style
sheets and then link to them all in your
XHTML. It’s the browser’s job to grab the
right style sheet based on the media type.
Say you have a “handheld” link
and a link that applies to all browsers;
which one gets applied?
The handheld browser will grab both
of them. But, assuming the “handheld” link
is below the “all” link, the handheld rules
take precedence, just like we talked about
before with the corporate, division, and
lounge CSS ﬁles.
So we have screen (computers),
print (print-like media), handheld (mobile
devices and cell phones). What else is
Here are a few more: aural (for
speech browsers), Braille (for people
who need tactile readers), projection (for
projected presentations or slides), tty
(for teletypes and terminals), and tv (for
televisions, of course).
In your “chapter10/lounge/print” folder, you’ll find “print.css”. Open up “lounge.html”
in the “chapter10/lounge” folder and add a new link to this style sheet for the media
type “print”. Make sure you also add the attribute media=“screen” to the <link>
element that links to “lounge.css”, so you have one style sheet for the screen, and
one for the printer. Then save, reload the page, and choose your browser’s “Print”
option. Run to the printer to see the result!
Optional printer required, not included with book.
<link type=”text/css” href=”print/print.css”
rel=”stylesheet” media=”print” />
Here’s the new link you need to
add to your “lounge.html” file.
Here’s the printed version. You’ve totally
changed how the page looks when it’s
printed, using CSS. That structure versus
presentation thing is really paying off.
Unfortunately, not all browsers
support the media attribute, so if
you didn’t get this result, try a