CSS Printing - @media Rule

You can use CSS to change the appearance of your web page when it's printed on a paper. You can specify one font for the screen version and another for the print version.

You have seen @media rule in previous chapters. This rule allows you to specify different style for different media. So, you can define different rules for screen and a printer.

The example below specifies different font families for screen and print. The next CSS uses the same font size for both screen as well as printer.

<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 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">