For people looking for documents online who would like to secure hard copies of these documents for future use, they would definitely appreciate a page even more if the page has a “printer-friendly” feature. This feature allows users to view and then print a document without the unnecessary details that will be included if you were to copy and paste the page itself. CSS allows you to influence the appearance of a page when users click on the printer-friendly version of your document. It will usually appears like your average Word document if you are using Windows.

Use @media rule to specify different style for different media. You can define different rules for screen and a printer using this rule.
The example below specifies different font families for screen and print. Next CSS uses the same font size for both screen as well as printer.

<style tyle=”text/css”>
<!–
@media screen
{
p.bodyText {font-family:verdana, arial, sans-serif;}
}
@media print
{
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print
{
p.bodyText {font-size:10pt}
}
–>
</style>

If you are defining your style sheet in a separate file then you can also use the media attribute when linking to an external style sheet:

<link rel=”stylesheet” type=”text/css”

media=”print” href=”mystyle.css” mce_href=”mystyle.css”>

Including “printer-friendly” feature increases your site’s usability as this tends to lessen your users difficulty when they want to come up with a printable copy of content.

You can visit http://www.cssdog.com/css_printing.html for other articles on CSS.

Tags: How to specify “printer-friendly” feature on a page