How to create CSS document for printing web page? - CSS for Print Media

You must have seen lots of web pages have a link to a print-friendly version where unnecessary stuff are removed. What many of them don't realize is that there is no need to create such pages because you can set up a second CSS document to be called up when a user prints the page as shown in the following example.

In this case, your page header should contain links to two CSS documents, one for the screen, and one for printing as follows:


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

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


The first line of code calls up the CSS for the screen (notice the inclusion of media="screen") and the second line calls up the CSS for the printable version (using media="print").

Now, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads: <link type="text/css" rel="stylesheet" href="print.css" media="screen" />.

Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. You'll certainly want to make use of the display: none command for navigation, decorative images and non-essential items.

If you do not want to have separate CSS documents and your are writing CSS withing HTML document itself then write screen and print media stylesheet as follows:

<STYLE type="text/css">
@media print {
   BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen {
   BODY {font-size: medium; line-height: 1em; background: silver;}
}
</STYLE>

For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS files.