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
  { {font-family:Verdana;font-size:24px;color:#CD853F;}
@media print
  { {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.

  Modified On Nov-30-2017 12:49:11 AM
  1. 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.

  1. Hi Pravesh,
    You can read below article for Different Screen Resolutions.

Leave Comment