Building a Print CSS
About the Author
Mike Rogers is a Web Developer who is currently at University studying Web Technologies. He also is the founder of Full On Design. He has several years experience freelancing and you can follow him on Twitter (Rogem002).
CSS sheets revolutionized the way websites are managed and created; they essentially made managing the design a piece of cake.
However, many webmasters (and blog lords) forget to add a print sheet (many of the themes for wordpress lack even a simple CSS print sheet). Here is a quick video tutorial on creating a simple print CSS really quickly.
Linking to the Print CSS
Linking to the Print CSS is quite simple; essentially all you need to do is use the following code:
<link href="URL TO PRINT CSS HERE" rel="stylesheet" type="text/css" media="print" />
Hiding everything unnecessary
Hiding elements can be quite tricky, but here is a snippet of code I normally use:
#element_you_want_to_hide{
visibility:hidden;
position:absolute; top:0px; left:0px;
}
Further Reading
Don’t Rely on Background Colors Printing – A really neat article on why using colours in your print CSS is just a bad idea.
CSS Mastery: Advanced Web Standards Solutions 2nd Edition – An awesome book which is recommended by most professional web designers and developers.