The Fruits of my Labour

One thing that really frustrates me is when I try to print something off a website, and my printer prints three pages of headers, graphics, and menus, and ONE page of what I actually wanted to print.  Some designers have thought ahead and have a link to open their pages in a new window, unformatted, but this doesn't always work, especially if the page is, for example, dynamically generated by submitting a form, or the user has a pop-up blocker.  Fortunately, there's a really cool CSS technique for making this easier.  It lets you use one stylesheet for what your users see on the screen, and a completely different stylesheet for what you print!  And it works like a charm!


This technique uses CSS Media Types, or as they're commonly known, @media rules.  And the best thing is, @media rules take about two seconds to learn how to use.  Here's an example:
If you use this example, just enclose all your headers and whatnot with <div class="displayonly"></div> and anything that should be printed but not displayed such as a copyright message with <div class="printonly"></div>. See?! I told you that was easy!