What’s the best way to create a “printer friendly” version of a Web page? Cascading Style Sheets (css) of course!
Style sheets can control which parts of the page will print while excluding others. Using CSS you can hide the navigation, images or banner ads when someone prints the page. You can even hide part of the page from being visible in the browser screen and then make it show up on the printed page. You can control everything from fonts to page elements.
Web pages that use a special print style sheet require being set up with identifying tags. If you are considering this approach for an existing site you may need to have the site retrofitted with the necessary CSS. The effort involved in this change will vary based on how the site was set up originally. Still, the future cost-savings should counter-balance any initial outlay.
Because you only need to create one version of the page (rather than a second “printer-friendly” version) CSS print styles make for a more cost-effective approach to printer friendly pages. Updates are easier too since there’s only one page to change. Often people forget to update the secondary “printer-friendly” version, leading to inconsistency on the site. Thankfully CSS offers a much better solution.
How-To Create a Printer-Friendly Page
Linking to the printer-friendly style sheet in the head of your document and giving it the media type of ‘print’ is the correct way to implement your print style:
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
The external css file might look something like this:
body { background-color:#FFFFFF; background-image:none; color:#000000 }
#header { display:none}
#sidenav { display:none}
#contentarea { width:100%}
#footer {display-none}
A style marked with a # sign is an area of the webpage that contains an id. You can set these areas to display:none if you do not wish these portions of the page to print yet still remain visible on the screen.