Hello everyone,

Lots of web pages have a print-friendly version and many of them don't. I realize that there's no need because you can set up a second CSS document to be called up when a user prints the page.

So, basically we need two css in the header section.

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

The first line of the 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").

So, 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="printstyle.css" media="screen" />.

Now just keep entering CSS commands until the display on the screen matches and 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.