15

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.

MIMI
  • 623
  • 2
  • 9
  • 13

4 Answers4

25

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" />
Viktor
  • 3,436
  • 1
  • 33
  • 42
  • Thanks. How can I hide a DIV from view? Is there a way to do that also? – MIMI Jul 03 '11 at 17:17
  • 1
    @MIMI: Do it in the print stylesheet with `display: none`. It's as simple as that. – BoltClock Jul 03 '11 at 17:20
  • @MIMI Yes, just target the `div` in the print stylesheet and set it to `display: none`. Ie. `#myDiv { display: none; }`. Edit: BoltClock was faster. =) – Viktor Jul 03 '11 at 17:22
  • You should be able to apply all styles the same as you would for the actual webpage (media is screen for the browser). – Shane Jun 19 '12 at 06:06
13

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.

tjm
  • 7,500
  • 2
  • 32
  • 53
7

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

R. Hill
  • 3,582
  • 1
  • 20
  • 19
2

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.

afaf12
  • 5,163
  • 9
  • 35
  • 58
  • If you want to maintain spacing by removing specific elements without losing its spacing, use `visibility: hidden` instead. – jojo Aug 17 '18 at 00:32