Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Setting Up Different Types of Stylesheets

Problem

You want to provide stylesheets for different media types such as aural, print, and handheld.

Solution

Create separate external stylesheets for the different media and name them by their media, such as print.css, screen.css, and handheld.css. Then use the link element with the media type in the web page to link to these styles. Another option is to use the @media rule.

Here’s print.css:

body {
 font: 10pt Times, Georgia, serif;
 line-height: 120%;
}

Here’s a new file called screen.css:

body {
 font: 12px verdana, arial, sans-serif;
 line-height: 120%;
}

And finally, here’s another file called projection.css:

body {
 font: 14px;
 line-height: 120%;
}

Now link to the three files from the web page, with the following lines within the head section. Each link has a different media type:

<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/projection.css"
media="projection" />

You could use the @media rule instead to specify the different media rules within the same stylesheet:

<style type="text/css">
<!--
@media print {
 body {
  font: 10pt Times, Georgia, serif;
 }
}

@media screen {
 body {
  font: 12pt Verdana, Arial, sans-serif;
 }
}

@media projection {
 body {
  font-size: 14pt;
 }
}

@media screen, print, projection {
 body {
  line-height: 120%;
 }
}
-->
</style>

Discussion

When creating styles for printing, add ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required