Is there any guidelines for print CSS, to make sure printed version looks nice.
Like: handling backgrounds, maximum width, browser specific issues, etc.
A List Apart’s “Going to Print”
"7 Tips for Great Print Style Sheets
A Default Print Stylesheet Template
Webcredible’s “Print stylesheet – the definitive guide”
About.com’s “CSS Media Types Create Print-Friendly Pages”
Tech-Evangelist’s “Formatting Printed Web Pages with CSS”
Print It Your Way
Links cribbed from my “best practices” tutorial. This should get you started. 
Just a quick note (in addition to those links) on handling backgrounds, all web browsers by default give the end users browser control over whether backgrounds are printed or not (in order to avoid wasting ink as a result of graphical flourishes which aren’t required). You cannot dictate to the end user how such effects will display. It’s worth stating for the record that the best types of print stylesheets do as much as possible to ensure only the bare essentials are printed - people don’t want to waste ink and paper as being eco friendly is very important these days (with the world as it is). Use CSS to hide ANYTHING which isn’t required within the printed medium like navigation links, advertisements, sidebars or anything else which isn’t of use to the printed page. A printed document should only have the core content and nothing more cluttering up real-estate, keeping it clean but reasonably pretty (and readable) will do the end-user justice.
What AlexDawson said - display:none; in your print stylesheet is your friend. Pages on a website are usually filled with crap that isn’t just a waste of ink, they serve no purpose on a printed page anyways.
Alex has covered most of it already, but just to add a few more:
- You can rely on borders much more than on backgrounds - try to avoid backgrounds completely if you can[]Don’t set a width for the main content - people have different printer margins and even paper sizes (eg A4/Letter), so just let it take up all the available space.[]Don’t position the main content or any of its parents, because that is likely to screw up on page breaks[]Try to avoid floating objects other than small ones, eg boxquotes - they are particularly likely to go wrong around page breaks[]Set page-break-after:avoid; on all heading elements you’ve used[]The only time any webbie will ever do this: specify the font size in pt[]Get rid of all navigation, link blocks, adverts, etc[*]Use content-after to print the link destination of any (external?) hyperlinks, and the title element of acronyms and abbreviations
One trick for making logos look better is to make them about 4 times bigger than they need to be for screen resolution and shrinking them down with css. It makes them print nice and sharp.
NO! Never use HTML or CSS to resize images from their natural dimensions. Browsers generally don’t make a very good job of it - images resized in the browser tend to have more jagged edges, whereas image editors are able to smooth the edges off. I have just tested this with an image resized to one-third of its size in GIMP and in Opera, and the image that has been resized in GIMP and displayed at its natural resolution looks much better both on screen and when printed than the one resized by forcing it in the code.
I agree with Stevie because visual browsers have no concept of dpi anyway so physically quadrupling the image size isn’t going to do much good.
The technique I described came from this article on alistapart.com
Because of the compression scheme used by gif files, an image 4 times larger in dimensions is not 4 times larger in memory. They are usually still pretty small.
E
It’s also a nice ‘trick’ to use CSS to make a different image (or even no image) for print - that way you can have your high-res image for print while not messing up screen… I like to do all three; image replacement over text, different image in my media=“print” stylesheet, that way if the browser supports print, the higher res version will print.
The key to that though is using an image format like png or jpeg that contains the proper physical print dimensions and making sure it’s set properly – since you can’t resize the images used in replacement techniques since they are backgrounds.
… and beware, webkit will print it incorrectly since it appears to ignore dimension info in images and instead assume everything is 96dpi and then work from the images pixel size.
Just beware that as the ALA article mentions, some browsers seem to download all media types stylesheets and files even when they aren’t using them - which is why I tend to keep such files contents to a minimum.
I can’t help what the article said, but I can tell you that when I tried that technique, it didn’t work. The browser-resized image printed just as it looked on screen - jagged and pixellated - whereas the image resized in GIMP came out nice and smooth. This was using PNG, which is almost invariably better than the GIF examples used in the ALA article.
Yes, they used a bloated print version GIF at 10,518 bytes whereas if it was PNG-8 you’d get nearer 7,396 bytes around a 30% reduction, and they were using “separate images”.
In either case Screen Resolution is NOT measured in DPI - I do not know where on earth they got the “absolutely crazy notation” it was… Basically DPI is a ‘font-size’ as far as the computer is concerned.
Anyway, the print ‘manuscript’ JPG was still at 72 dpi (both screen/print versions) I was under the impression they had a used high “resolution version”, well apparently not, what a load of cods-wallop…
To be honest that article wasn’t exactly ‘accurate’ and totally mangled the concepts of ‘resolution’ and ‘physical dimensions’ of an image.
The thing that was correct; is that you can use different images for print media verse screen other than that it was pretty much flawed.
Of course, no one is advocating using html to decrease an image for the web. But when printing, a larger image provides more information to the printer. DPI certainly is relevant in printing. There are many combinations of printers, browsers, papers,inks, etc… that effect printing.
To do a fair test of print resolution, I made a page with two jpeg images and two png-24 images. The top two are hi-rez set to 250 dpi, the bottom two are low rez set to 72 dpi.
I made a print on an Epson c86 using Epson Photo Quality paper, maximum print quality.
The hi-rez jpg is 28k which isn’t too bad, especially if printing the page is an important part of the functionality like on an online manual or “print the quote” page.
The enlarged scan below clearly shows a significant increase in quality from of the hi-rez:
Here is the test page:
http://s181455844.onlinehome.us/printTest/index.html
E
Yes, to the Printer (not browser screen) DPI matters - I agree - that will effect print size/output… What I was referring to the fact they never actually altered the “resolution” for the larger image in the first place. 
However, I respect that you actually did change the ‘resolution’ DPI (which is what I would have done anyway, if I were to use a separate ‘higher resolution’ print image).
That is all I was getting at they just altered “dimension” not ‘resolution’ as such for the benefit of the printer - nothing more. I hope that clarifies what I previously meant.