CSS Cookbook: How to make a printer-friendly page with a style sheet

1 2 3 4 5 6 Page 5
Page 5 of 6

Gaining Attention Through the Teaser

Next up is the content in the h4 element. Because this content serves as a teaser for the article, it should be visually distinctive from the article text. To accomplish that, set the background to about 30% black, change the typeface to sans-serif, and put in some padding (see Figure 10-7):

#content h4 {
 font-family: Helvetica, 
Verdana, Arial, 
  sans-serif;
 border-top: 3pt solid black;
 background-color: #BEBEBE; 
 /* ~30% black */
 padding: 12pt;
 margin: 0;
}
Figure 10-7. Setting up the article teaser

Figure 10-7. Setting up the article teaser (click image for larger view)

As for the content of the article, leave the text pretty much as it is except for two points of interest: leading, covered here, and links, covered in the next section.

Remember that in the body element, the font for the entire page is set with the serif typeface, and through inheritance that typeface style is picked up in the paragraph elements as well. However, you may want to space out the lines, or increase the leading, of the text in the paragraph. To do this, change the line-height property:

#content p {
 line-height: 18pt;
}

Displaying URIs After Links

Any links in the article become useless when printed. To make them beneficial to the reader when the page is printed, make sure all URIs from the links are displayed. To do that, set up a CSS rule to display the URIs after every link in the content division of the document. Also, for visual effect, remove the default underline of the links, make sure the font-weight is bold, and set the color to gray (see Figure 10-8):

1 2 3 4 5 6 Page 5
Page 5 of 6
7 inconvenient truths about the hybrid work trend
Shop Tech Products at Amazon