CSS Print Stylesheet:-

many of us working on css to style web page for the visitors
you may added this line before in your page

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

ok the css file now will affect the screen but what if we want the css affect the print
yes we want the visitor print the page but without the menu , advertisement .. etc
ok we will now create a  css file and we will name it print.css

now add this line to your page
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
do you notice someting ??
yes , media=”print” this tells the browser to use this css file when print

concepts of print style sheet:-

1- adjust body margin
adjust the body margin so printed page margin will be as you want not the browser default
you can use this for example

body{margin:0;
border:1px solid #000000;
}
2- use one measure for your fonts and line height and related things:
you must use one measure for font size and related things like pt , em so it can display good on your printer




3- page break
the biggest problem will face any developer in print issues is page break , the browsers differ in page break , many times before i used print css if web page is longer than one page it cause pagebreak but if there is image in the middle of that break it will cut and there is a disaster
so you can adjust the page break by

page-break-beforepage-break-after
it tells the browser where to break the page before or after element
for example if you want page to break after the div named “break-div” you may type this line in print.css

#break-div{page-break-after:always;
}
4- other tips:
- don’t ever use background color or background image in your print stylesheet the visitor will hate you
- try to be very simple the visitor when he wants to print your page he wants to keep the information in your page not the design
- just use the print css its better and more professional
enjoy and see you in another post