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

#content a:after {
 content: " <" 
 attr(href) "> ";
 font-family: courier, monospace;
 font-weight: normal;
}
a {
 text-decoration: none;
 font-weight: bold;
 color: #626466;
} 

Figure 10-8. Adjusting the links and leading in the content (click image for larger view)

Finishing with the Footer

At this point you’re ready to work your way down the page to the footer that contains the copyright notice. Because the main header is in a sans-serif typeface, balance the page by centering the copyright notice, creating a line rule through the border-top property, and setting the typeface to sans-serif as well (see Figure 10-9):

#footer {
 border-top: 1px solid #000;
 text-align: center;
 font-family: Helvetica, 
 Verdana, Arial, 
  sans-serif;
}

Figure 10-9. The styled footer (click image for larger view)

With the print CSS finished, copy the CSS rules and put them into an external style sheet called print.css. Then, uncomment out the CSS for screen media and associate the print CSS through the link element:

<link href="adv.css"
   type="text/css" 
   rel="stylesheet" 
   media="screen" />
<link href="print.css" 
   type="text/css"
   rel="stylesheet"
   media="print" />

Now you can create a printer-friendly style sheet. Assuming your site visitors have a browser that can render print media style sheets, when your visitors print out the page they will automatically get the proper layout sent to their printers.

CSS Cookbook

by Christopher Schmitt

ISBN 0-596-52741-1

O'Reilly Catalog: CSS Cookbook

Copyright © 2007, 2004 O'Reilly Media Inc. All rights reserved.

Printed in the United States of America.

Used with permission from the publisher.

Available from booksellers or direct from O'Reilly Media(oreilly.com)