Designing a Style Sheet for Print Pages

Using the punch list of modifications required for a print-friendly web page that you saw earlier in the hour, it's time to take a stab at creating a print-friendly style sheet. Let's first take a look at a page that is displayed using a normal (screen) style sheettake a look at Figure 15.3.

Figure 15.3. The CSS-styled hockey player page as viewed in a normal web browser.

This figure reveals how the page looks in a normal web browser. Although you can't quite make out the different colors on the printed page, you can open the page yourself in the files available at http://www.samspublishing.com/ to view the full-color page in your own browser. In reality, this page isn't really too terribly designed for printing already, but it could still stand some improvements.

The following changes can help make this web page print better:

Change the color of all text to black.
Remove link formatting (bold and color).
Stack the two player information sections vertically because they are unlikely to fit horizontally on the printed page.
Remove the contact link entirely.

The first two changes to the normal style sheet are fairly straightforward, and primarily involve changing or undoing existing styles. The third, however, requires a bit of thought. Because you know that printed pages are a fixed size, it makes sense to use absolute positioning for all the elements on the printed page. This makes it much easier to place the content sections exactly where you want them. Finally, the last item on the list is very easy to accommodate by simply setting the display style property of the contact element to none.

Watch Out!

Although absolute positioning works for the hockey player sample page, it's not always a good idea for styling print-specific pages. More specifically, if you have a page that contains more than a printed page worth of content, you're better off using relative positioning and letting content flow onto multiple pages.

Listing 15.1 contains the CSS code for the player_print.css style sheet, which incorporates these changes into a style sheet that is perfectly suited for printing hockey player pages.

Listing 15.1. CSS Code for the Print-Specific Hockey Player Style Sheet

body {
  font-family:Verdana, Arial;
  font-size:12pt;
  color:black;
}

div {
  padding:3px;
}

div.title {
  font-size:18pt;
  font-weight:bold;
  font-variant:small-caps;
  letter-spacing:2px;
  position:absolute;
  left:0in;
  top:0in;
}

div.image {
  position:absolute;
  left:0in;
  top:0.5in;
}

div.info {
  position:absolute;
  left:1.75in;
  top:0.5in;
}

div.favorites {
  position:absolute;
  left:1.75in;
  top:2in;
}

div.footer {
  position:absolute;
  text-align:left;
  left:0in;
  top:9in;
}

table.stats {
  width:100%;
  text-align:right;
  font-size:11pt;
  position:absolute;
  left:0in;
  top:3.75in;
}

div.contact {
  display:none;
}

.label {
  font-weight:bold;
  font-variant:small-caps;
}

tr.heading {
  font-variant:small-caps;
  background-color:black;
  color:white;
}

tr.light {
  background-color:white;
}

tr.dark {
  background-color:#EEEEEE;
}

th.season, td.season {
  text-align:left;
}

a, a:link, a:visited {
  color:black;
  font-weight:normal;
  text-decoration:none;
}

Probably the neatest thing about this code is how it uses inches (in) as the unit of measure for all the absolute positioning code. This makes sense when you consider that we think of printed pages in terms of inches, not pixels. If you study the code carefully, you'll notice that the text is all black, links have had all special style formatting removed, and content sections are now absolutely positioned so that they appear exactly where you want them.

Table of Contents