HTML and CSS Reference
In-Depth Information
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.
@page {
margin: 1in;
}
5.
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:
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif ;
color: #000;
}
7.
The #wrapper , #header , #main , and #aside rules provide structure and decorative
elements not needed in the print layout. Delete the rules entirely.
8.
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:
Search WWH ::




Custom Search