HTML and CSS Reference
Figure 16-3. Hiding the visual styles with the media attribute creates a crude print version
3. Create a blank style sheet called print.css in the styles folder, and attach it to the
page with the media attribute set to print like this:
<link href="styles/print.css" rel="stylesheet" media="print" >
4. Add the @page rule at the top of print.css, and set the margins. i'm using one inch all
round, but set the value to 2.54cm if you prefer to use metric measurements.
Copy all the style rules from styles/horizontal.css, and paste them into print.css.
6. Remove all the styles except font-family and color from the body rule. Change
the value of font-family to use a serif font like this:
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif ;
The #wrapper , #header , #main , and #aside rules provide structure and decorative
elements not needed in the print layout. Delete the rules entirely.
The text in the paragraphs uses the browser default font size, 16px , which is
equivalent to 12pt . it's also indented on both sides. Remove the left and right
margins, and reduce the font size by amending the p style rule like this: