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

Example:

HTML Code:

<html>

<head>

<style>

@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;}

  }

</style>

</head>

<body>

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

</body>

</html>

Output:

This is On Screen View:

This is while printing view:

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.

css-css3

Updated 07-Sep-2019

Leave Comment

2 Comments

View All Comments

Vijay Shukla

02-Apr-2013

Hi Pravesh,
You can read below article for Different Screen Resolutions.
http://www.mindstick.com/Articles/54a6de62-0aa5-45a7-8a1a-9cc05035950d/?Responsive%20layout%20using%20CSS3

Pravesh Singh

01-Apr-2013

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.

articles