How does this print stylesheet work?

Question

I really like how http://www.honorshaven.com/ looks printed (to pdf). I've looked through the source to try to figure out how they did it (my navigation always turns into ugly bullet lists on print...) -- and I'm at a loss. Anyone know? Any help would be awesome! Thanks, Martin

[Edit] I'm familiar with print stylesheets -- but aren't they mostly reached by a "print friendly"/"print me" link? In this case I'm just going up to the browser bar and choosing print. I'm sure I'm missing something stupid, but I don't know what...

Answer 1

You need to use a stylesheet designated for printing. To do this, set the media type to print instead of all or screen. In this separate stylesheet, you can hide your navigation menus, change your fonts, spacing, margins, etc. and it is specific to the print output.

Here's a great article on ListApart about CSS Print Stylesheets.

Answer 2

You can specify which stylesheet to use for different media.

In this case, they implement a print specific stylesheet to handle styling everything for a printed page.

Check out this W3 page for the different media types available:

W3C - Media Types

Answer 3

if you really want to copy them don't declare your media in the link rel tag. Or better, just put media="all". That way all your styles will stay the same when you print your page.