Source - http://www.tamhsc.edu/style/web/print.php?print=1

 

Unless a page prints well without any alterations, include a printable version of it. This does not mean that you must maintain two versions of the page; use CSS to define a separate print stylesheet for your documents.

Some examples of useful code for the print stylesheet are:

a:link:after, a:visited:after, { /* Prints the URL after linked text */
            font-size: 85%;
            content: " (" attr(href) ")";
            text-decoration: none;
}

img { /* Prevents all images from appearing */
            display: none;
}

There are two methods of using a print stylesheet.

Media Attributes

Include a second stylesheet and specify the media attribute:

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

Further Reading

·                     Eric Meyer: Going to Print

·                     Print Different

·                     Eric Meyer on CSS, chapter 6

·                     Kiss Printable Pages Goodbye

This method is invisible to the user and often confuses them: "What you see is not what you print." For this reason, we prefer style switching to the media attribute.

Style Switching

In the HSC templates, a link to a print-friendly version of the page is visible in the header. The link leads back to the same page but sets a PHP variable. The PHP is written to hide the print stylesheet until triggered in the browser, but to allow Dreamweaver to see the screen stylesheet during development:

<?php if (!$print) { ?>
<style type="text/css">
<!--
@import url("/css/float.css");
-->
</style>
<?php }
else echo "<link href=\"/css/print.css\" rel=\"stylesheet\" type=\"text/css\" />";
?>

Further Reading

·                     Paul Sowden's javascript style switching article at A List Apart

·                     more style switching resources

http://www.tamhsc.edu/style/web/print.php?print=1

 

Here's an example of the print media in action:

<style type="text/css">

@media print{

  body{ background-color:#FFFFFF; background-image:none; color:#000000 }

  #ad{ display:none;}

  #leftbar{ display:none;}

  #contentarea{ width:100%;}

}

</style>