HTML and CSS Reference
Stylesheets—they're not just for
desktop browsers anymore…
There's actually another reason you might want to have multiple style
files: let's say you want to tailor your page's style to the type of device
your page is being displayed on (desktops, laptops, tablets, smartphones,
or even printed versions of your pages). Well, to do that there is a media
attribute you can add to the <link> element that lets you use only the
style files that are appropriate for your device. Let's look at an example:
The media attribute
allows you to specify
the type of device this
stylesheet is for.
<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width: 480px)">
…an d any devi ce th at ha s a w idth
of at m ost 4 80 p ixels .
Likewise, we could create a query that matches the device if it is a printer,
<link href="lounge-print.css" rel="stylesheet" media="print">
…the media type is “print”,
which means we're viewing
it on a printer.
There are a variety of propeties you can use in your queries, like min-
device-width , max-device-width (which we just used), and the
orientation of the display (landscape or portrait), to name just a few.
And keep in mind you can add as many <link> tags to your HTML as
necessary to cover all the devices you need to.