HTML and CSS Reference
In-Depth Information
Q:
That's pretty cool. So I can set
up different stylesheets for different
devices?
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
query.
Q:
Are there other media properties
besides max-device-width and min-
device-width?
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
stylesheets.
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"
rel="stylesheet" media="print">
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.
