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

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.

Answer 3

I've used

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

To achieve this. Assign #ids or .classes to elements you don't want to display. And use display: none for those elements in print.css stylesheet.

Answer 4

Answer is the CSS @media rule: http://www.w3.org/TR/CSS2/media.html#at-media-rule