CSS FOR PRINTING:

     Have you ever noticed that when you are navigating on a web site and you find something worth printing, such as a recipe for dinner or an article that you found at cnn.com, and then you click on the print button on your browser and you soon realize that your printer cartridge is going to use a lot of ink with all the “trash” that will be printed along the sides, top and bottom of the page, such as pictures and propaganda sections of the page?

     Let me ask you another question then. Have you ever noticed a link that is usually located near by the section you are trying to read, that reads “print version”? That’s right, there is print friendly version of the text in almost every “big company” website, and this is controlled simply by CSS. This is usually called CSS for printing and I’ll show you how to implement it on your website. It is simple and all you have to do is tweak the CSS code that you already have.

     Linking a print style sheet to your pages is the same as linking a normal style sheet, but with one difference: you'll need to add a media attribute to your <link> tag. Like this:

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

     If you're using an internal style sheet, you can add that same media attribute to your <style> tag:

<style type="text/css" media="print">
body { font: 12pt Times, serif; }
</style>

     In both cases, you can still link your normal style sheet that the web browser will use for rendering your page. You can give that style sheet <link> a media attribute of "screen":

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

     To eliminate whatever you don’t want to be printed you just have to add the following property to the element:

display: none

     You can also change other properties such as font color and size, just set those properties in the print style sheet and you are good to go.

Tuesday, December 9, 2008 6:12 PM