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: