Many of us have websites that look great on the computer monitor, yet wreak havoc on printers. CSS has a great way to make your content more printer friendly when it is needed.
Take the following CSS code for example:
<style type="text/css">
@media print {
#menubar, #navbar, #searchbar {display: none;}
#wrap, #content, #comments {width: 100%; margin: 0; background: #FFFFFF;}
}
</style>
This code snippet in your page essentially says that when this document is being printed, hide the menubar, the navbar, and the searchbar – they are not needed with the printout.
For the content that we want printed, set the wrap, content, and comments sections to full page width with no background colors.
The page will continue to look great on the computer screen, but now your content prints well from that laser printer!
