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 (i.e. by using the HTML link tag):

<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.

Creating a "Print this Page" Button

You can use JavaScript to automatically open the print dialog box. Therefore, you can create a "print this page" button that, when clicked, automatically opens the print dialog box. This can be a useful feature, as it can encourage users to print your page for later reference.

To do this, see the JavaScript Print article.