Previous Section  < Day Day Up >  Next Section

Recipe 8.1 Creating a Printer-Friendly Page


You want to create a printer-friendly page without having to manually or dynamically generate another web page.


Create a separate style sheet that dictates how a page looks when printed. Then associate the style sheet and set the media property to print:

<link rel="stylesheet" type="text/css" href="adv.css" 


<link rel="stylesheet" type="text/css" href="print.css"


If you're writing a web page in valid XHTML, you need to include a space and a forward slash before the closing bracket at the end of an empty element such as link:

<link rel="stylesheet" type="text/css" href="adv.css" 

media="screen" />

<link rel="stylesheet" type="text/css" href="print.css" 

media="print" />


You can use style sheets to dictate the presentation of documents in a wide range of media. By default, the value for the media attribute is all. Without the attribute, the user agent will apply the CSS rules in the style sheet to all media.

Although the most common attribute you probably have encountered is screen, which is used mainly for displaying documents on color monitors, the CSS 2.1 specification actually defines a total of ten media types, as shown in Table 8-1.

Table 8-1. Media types for CSS

Media type



Suitable for all devices


Intended for Braille tactile feedback devices


Intended for paged Braille printers


Intended for handheld devices (typically small-screen, limited-bandwidth devices)


Intended for paged material and for documents viewed on-screen in print preview mode


Intended for projected presentations—for example, projectors


Intended primarily for color computer screens


Intended for speech synthesizers


Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities)


Intended for television-type devices (with low-resolution, limited-scrollable color screens and available sound)

You can use one style sheet for all media:

<link rel="stylesheet" type="text/css" href="uber.css" 

media="all" />

Or you can use one style sheet for several (but not all) media. For instance, to use one style sheet for both projection and print media, simply separate the media values with a comma:

<link rel="stylesheet" type="text/css" href="print.css" 

 media=" print,projection " />

In the preceding code, the print.css style sheet is used for projection and print media when rendering the web document.

You can use other methods besides link to assign media types. One method is @import, as shown in the following line, which specifies the style sheet for both print and projection media:

@import url(print.css) print,projection;

The @import rule needs to be placed within a style element or within an external style sheet.

Another method you can use to associate and dictate style sheets and media types is @media, which enables you to write blocks of CSS rules that can be set for different media, all in one style sheet:

<style type="text/css">

@media print {

 body {

  font-size: 10pt; 

  background-color: white;

  color: black;



@media screen {

 body {

  font-size: medium; 

  background-color: black;

  color: white;




See Also

Media Types in Section 7 of the CSS 2.1 Working Draft,

    Previous Section  < Day Day Up >  Next Section