How can I have different CSS when I print or print preview?

Question

I'd like to change some things on my web page. Also I would like to make some things hidden. Is there a way I can do this with CSS when I print? In particular I want to be able to hide some DIVs and all that they contain.

Answer 1

This can be achieved with a separate print stylesheet. The media attribute is the key:

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

Answer 2

Yes, you need to use the media attribute when you include your css. E.g.

<link rel="stylesheet" href="my_print_style.css" media="print">

Or, you can use the media rule in your stylesheets if for example, you do not have enough changes to warrant a whole new stylesheet. Something like this,

@media print {
    // print specific styles.
}

See http://www.w3.org/TR/CSS2/media.html#at-media-rule, for details and valid media types.