It’s Called Web Design

How many times have you printed off a webpage, only to have it spit page after page of waste from your printer?

If you have a site that people might be printing pages from, you should include a print CSS file that will allow you to print only specific items from the page.

In the head code under your normal CSS, simply insert this code

<link rel="stylesheet" media="print" type="text/css" href="http://yoursite.com/print.css" />

Next make the print.css file on your server and start setting objects to display:block if you would like it to print or display:none if you do not.

This is not the limitation of the print.css file though. You can also change font-sizes, margins, floats, etc so that the printed version of your page looks much better.

One nice feature that you can add is a line that says something like “Thanks for visiting our site and printing this page!”. Just place it in an element and add a class like class=”printmessage”. In your regular CSS just list .printmessage {display:none;} and in your print.css label it .printmessage {display:block;}.

This entry was posted on Wednesday, January 6th, 2010 at 9:59 am and is filed under CSS, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.