Head First HTML with CSS

Q: That’s pretty cool. So I can set
up different style sheets for different
devices?
A: 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.
Exercise
there are no
Dumb Questions
Q: Say you have a “handheld” link
and a link that applies to all browsers;
which one gets applied?
A: 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 files.
the box model
Q: So we have screen (computers),
print (print-like media), handheld (mobile
devices and cell phones). What else is
there?
A: 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
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!
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
newer browser.
Optional printer required, not included with book.
you are here 423