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.