HTML and CSS Reference
Q: That's pretty cool. So I can set
up different stylesheets for different
A: Yes, you can set up several
stylesheets and then link to them all in your
HTML. It's the browser's job to use the right
stylesheet based on the media type and the
characteristics you specify in your media
Q: Are there other media properties
besides max-device-width and min-
A: Yes, there are quite a few, including
max and min width (different from device-
width, as you'll see shortly), max and min
height, orientation, color, aspect ratio, and
more. Check out the CSS3 Media Queries
specification for all the details (http://www.
w3.org/TR/css3-mediaqueries/), and Head
First Mobile Web for examples.
Q: Is it better to use <link> or @media
to specify different CSS rules for different
media types and characteristics?
A: Either one will work. But notice that
if you put all your rules in one file and split
them up using @media rules, your CSS
could get pretty big. By using different <link>
elements for different media types, you can
keep your CSS organized in different files
depending on the media type. So, if your
CSS files are fairly large, we recommend
using <link> elements to specify different
In your “chapter9/lounge” folder, you'll find “lounge-print.css”. Open up “lounge.html” in the
“chapter9/lounge” folder and add a new link to this stylesheet 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 stylesheet 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!
<link type="text/css" href="lounge-print.css"
Here' s the new link yo u need to
add t o your “lounge.h tml” file.
Here's the p rinted version. Y ou've totally
changed how the page looks when it's
printed, usi ng CSS. That st ructure versus
presentatio n thing is really paying off.
OPTIONAL PRINTER REQUIRED, NOT INCLUDED WITH BOOK.