Create "Printer-Friendly" Pages with CSS and the @media Type

There may be a time when a visitor wants to print a page from your website. It's worth spending five minutes to create "printer-friendly" pages using CSS. (Tip: navigate to "Print Preview" on your browser to see how this page looks when printed out.) Some of you may already know about the <link rel="stylesheet" type="text/css" href="print.css" media="print" /> directive, however, it's better to place your print CSS within your main CSS file. Instead of having a separate CSS file for printing (which can increase the initial load time since the browser must make an additional HTTP request to the server before rendering the page), place @media print {... } at the bottom of your CSS file. It must be at the bottom to override your previous declarations.

.printContent { visibility:hidden; position:absolute; } /* print only content */
 
@media print {
     /* Page content */
     #page, #colContent { margin:0px; padding:0px; width:inherit; }
     #page { padding:0% 5%; } /* Firefox fix for margin cut-off */
 
     /* Hide these elements */
     #header, #colTopic, #colAbout, #navFooter, .noPrint
     { display:none; }
 
     .pageBreak { page-break-before:always; }
     .printContent { visibility:visible; position:relative; }
     h1 { color:#000; }
}