Web Design 35S‎ > ‎CSS‎ > ‎

I can print clearly now

Today you're going to play with print style sheets. One of the problems of printing web pages is that when you ask a page to print it will print everything including menus, ads, and headers. To solve that problem, you need to create a separate print stylesheet in addition to your regular style sheet.

So in addition to you regular style sheet command which appears in the head of your document<link rel="stylesheet" type="text/css" href="style.css" /> you need to add a second one like this <link rel="stylesheet" type="text/css" href="print.css"  media="print" />.

You don't need to completely re-write your style sheet. The only things that need to appear in the print stylesheet are the things you want to change when printing. 

For example, if you chose to give your paragraphs a particularly vibrant text color like pink that won't print well p{color:pink;}, in the print css you can redefine this to p{color:black;}.

As well, if there are elements you don't want print, such as a particular div, or paragraph, you can define them to not display. If your paragraph p.bob contained information that you didn't want to print, all you'd have to do is put p.bob{display:none;} into your print css. Pretty easy, eh?

So-oo-oo, what you need to do is this:
  1. Create a web page with at least two divs. Pick a nice subject like applesauce, 7-UP, or maybe iPads.
    • The left div will have a menu, the right div will have content.
    • Your right div should include pictures.
    • You should have at least two paragraph styles in your right div.
      • One of these paragraphs you will not print.
  2. You don't want to print the menu, so in your print stylesheet you'll set that up to not print.
  3. You should also make sure one of your two paragraphs doesn't print.
  4. Try printing? Did it work? Does your document look attractive?
Comments