CSS Print @media Rule

You can use CSS to change the appearance of a web page on printed paper. You can specify different fonts for the screen version and the printed version.

You’ve already seen the @media rule in previous chapters. This rule allows you to specify different styles for different media. Therefore, you can define different rules for the screen and the printer.

The following example specifies different font families for the screen and print. The following CSS uses the same font size for both screen and print.

<style type = "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 a style sheet in a separate file, 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">