Home > DeveloperSection > Articles > CSS Printing

CSS Printing

2 Comment(s)
 2430  View(s)
Rate this:

CSS Printing

In this article I am trying to explaining the CSS Printing, when we want to give the print command of our HTML application and I want to change the font-family and its font-style in hard copy(on paper) output so use the CSS printing.

You can use CSS for the change the plausibility of your web pages when printed on a paper. You can provide one font to the soft copy output (on screen) and provide another font for hard copy output (on paper) or printed version. CSS provide has a media rule, this rule allows you to identify different style for different media. So you can describe different rules for screen (soft copy output) and a printer (hard copy output).

HTML Code:




@media screen


  p.media {font-family:Verdana;font-size:24px;color:#CD853F;}


@media print


  p.media {font-family:Castellar; font-size:70px;font-style:italic;color:#CD853F;}





<p class="media">Mindstick&copy; Unleash Your Imagination</p>





This is On Screen View:

CSS Printing

This is while printing view:

CSS Printing

In above outputs when we show on screen (soft copy output) its font-family is Verdana, font-size is 24px and color is in hex format #CD853F. And when we see print preview its font-family is Castellar, font-style italic, font-size is 40px and color is in hex format #CD853F.

For Different Resolutions.

By Pravesh Singh on   4 years ago

This blog is good for beginners but I need the media query example for different screen resolution means when I open a web page in 1024x768 my web page is show full content but when my page show on a small mobile screen then some elements will hide.

For Different Screen Resolutions.

By Vijay Shukla on   4 years ago
Hi Pravesh,
You can read below article for Different Screen Resolutions.

Don't want to miss updates? Please click the below button!

Follow MindStick