CSS Print Version

You can use CSS to change the appearance of your web page when it's printed. For example, you can specify one font for the screen version and another for the print version.

To create separate styles for your print version you use the @media rule. The @media rule allows you to specify a different style for different media.

The example below specifies a different font for screen and print but uses the same size for both.

@media screen
{
p.bodyText {font-family:verdana, arial, sans-serif;}
}

@media print
{
p.bodyText {font-family:georgia, times, serif;}
}

@media screen, print
{
p.bodyText {font-size:10pt}
}

You can also the media attribute when linking to an external style sheet:

<LINK rel="stylesheet" type="text/css"
	 media="print" href="/css/print_version.css">

You can also use the CSS @media rule for other media types such as handhelds, braille, aural, projection, tty, and tv.