Tutorials Point

  CSS Beginners
  CSS Advanced
  CSS References
  CSS Resources
  Selected Reading

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

CSS Printing - @media Rule

previous next AddThis Social Bookmark Button


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. 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}

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

previous next Printer Friendly