Change the way your page prints with CSS

Sometimes your pages just aren't that pretty when you print them and these days users are printing a lot. Even with all the actions to try and limit printing, we're still increasing our printing by 300% each year.

With CSS we can remove anything we don't want printed, change particular parts to our liking or add more details in, anything you want to do.

You can create the CSS as a separate file (recommended) or add it into your headers. When you reference this CSS file simply add the attribute of media="print" like below:

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

Inside the css file you can style anything you want or use the script below for simplicity:

body {visibility:hidden;}
.print {visibility:visible;}
 

With the script above you can apply the class of "print" to anything you want printed and the rest of the page will be removed.

NOTE: For a better environment please try and limit the amount you personally print, use 'Print Preview' to test the scripts above.