Web design trick: hiding content from the printer

Here is a simple trick that I sometimes use if I need to hide certain parts of a web page when it is sent to the printer. Now, this is not rocket science. Anyone who knows their way around CSS already knows it. But this might be a useful tip for some people who don’t do web design for a living, but still do some HTML editing here and there (hey, it’s a part of life).

The trick is to use a so-called “media rule”. When setting up a style sheet for a HTML document, you can instruct the browser to apply parts of it only on certain media. And the printer is one of the available media that you can manipulate this way.

So, first we create a style that simply hides an element. Then we wrap it in a “media print” declaration and we get something like this:

This line will show up on the printer.

This one will not.

Nice, eh? For more information about CSS media types, you can read this article: CSS Media Types