Print

optimise css style sheet for print media
should consider adding in a print specific style sheet

eg - the browser removes the background for print

2 ways of achieveing the same result

link rel-"stylesheet" type="text/css" href-"css.css" media="screen, handheld"/>
link rel-"stylesheet" type="text/css" href-"print.css" media="print"/>


css document

h1 {
font-family:Verdana, Geneva, sans-serif;
font-size:1.2em;
color:#F90;
}
p {
font-family:Verdana, Geneva, sans-serif;
font-size:.7em;
color:#CCC; }


When printed to pdf - there are no styles - defaults - needs to be overridden in the print css style sheet


Second method:

style type="text/css">
@media screen
{
styles for media
}
@media print
styles for print
}
@media screen,print
{
styles for screen and print
}
/style>

Tips for optimising for print

font sizes - print media preferred is points - 11 or 12pt = 1em or 100%
remember % and em are relative

if site has fixed width, doesn't translate well with some browsers for print
can be cropped or shrunk to fit - ideally width needs to be set to width:100%;

remove a component: inside print eg.
p {
display:none;
}
don't forget to change font sizes to points & width to 100%