Creating a css style print sheet

You are here

CSS

How do you create a Print Style Sheet so that the users printer ink is not being run dry because of unnecessary images being printed? There are three things a developer needs to remember when building this for a client. The first one is What are the client needs?, yes that means a conversation, ok be brave you can do it. The next is setting up the style sheet css html link at the bottom of your html css links in the html document header tags, like the example below.

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

When the browser sees the media="print" it will only activate that style sheet when the user presses the print button. The only question left to ask is what css rules should I write for a print.css sheet? The answer is anything you like. I use the principle What is it the user wants to print? (usually the content and maybe the logo). So I try and make the text as easy to read after it would be printed.