Print Style sheets
So let’s say you want the print version of your web page to look differently than the screen version. The best way to accomplish this is to use a media type. Media types allow the web designer to assign specific styles based on the type of device the page will be displayed on. They can be incorporated using the media attribute of the <link> element or by @media function in the style sheet itself.
Using media types you can change any aspect of an element: the font-family, color, size, and background-color. However, you can also use other properties such as the display property. If you set the display property to none you can hide certain elements on a web page. Below is an example of a style sheet that uses the @print function.
@media print {
div.hide { display:none; }
body {
background-color:white;
font-size:100%;
font-family:Arial, Helvetica, serif;
color:black;
text-decoration:none;
}
}
body {
color: #336699;
font-family: Garamond, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
background-color: #ffffff;
margin-top: 5px
}
The print version of this style sheet changes the font-family, color and background color so that it is more suitable to print. In addition, it hides certain pieces of the page (those pieces in the <div class=”hide”> tags.
To see this trick in action select File, Print Preview and examine how this page prints. You will notice that the story page print without the navigation bar and page header to make them more readable.