How to only show certain parts with CSS for Print?

Question

I have a page with lots of data, tables and content. I want to make a print version that will only display very few selected things.

Instead of writing another page

Answer 1

If you want to display some links etc. when in the browser, that you don't want to be printed. Furthermore you have some logos and letterhead info that only should go on the printed page. This seems to work fine:

Example:

CSS:

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

HTML: