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

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

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.

Answer 3

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