Create CSS Stylesheet and JavaScript for Print

admin — Mon, 13 Apr 2009 16:38:17 +0000

CSS Stylesheet for Print

When we want to print out HTML page we need a lighter version of our HTML page. Basically, we don’t want to print the background images, background colors, advertisements and other things which are not relevant in printing. For this purpose, we need to specify a CSS stylesheet which browser use when we print our HTML page. We can also change the width and layout of our HTML page. We can specify our CSS stylesheet for print like this.

<head>
/*External style sheets*/
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>

<head>
/*Embedded style sheets*/
<style type="text/css" media="print">
	.noprint
        {
		display:none;
	}
</style>
</head>

The important thing to note here is the media descriptor media=”print” which we are giving through media attribute. The browser knows using this media descriptor that this CSS stylesheet is defined to use at the time of print. We can define CSS stylesheet for SCREEN like this.

<head>
/*External style sheets*/
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>

<head>
/*Embedded style sheets*/
<style type="text/css" media="screen">
	.header
        {
		width:800px;
                height:200px;
	}
</style>
</head>

In the following example, I don’t want to print the “Print this Coupon” link in coupon. So, I have just added the class “noprint” and set the display property none in this class. Now, I will apply this class to all the elements which I don’t want to print. You can easily create other classes for different purpose like to change the background color of element in print.


<html>
<head>
    <title>CSS stylesheet for Print</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>
<body>
	<div class="coupon-mini">
  	<table width="500" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="146" align="left" valign="top"><div class='default-coupon'><img src='/sites/default/files/coupon_116_116.'></div></td>
      <td width="354" align="left" valign="top">
      	  <h3 style="font-family: 'palatino linotype',palatino; line-height:18px; padding:6px 0 0 0; color:#0e549c; ">
          		Divan Restaurant and Hookah Lounge, Alabama          
          </h3>
          <div class='coupons-text1'><span>McDonald 20% Off.</span><p>McDonald 20% Off.</p></div><br />
          <div style="clear:both;"></div>
          <div class="detail-basic1">
          	 3125 Piedmont Rd NE, Atlanta, Alabama<br> 
             <strong> Phone Number :</strong>  (404) 365-0410<br/>
             <strong> Pincode:</strong>  30305 <div class="openhr1"><strong> Opening Hours:</strong>  6:30 PM to 01:00 AM</div>
	         <div class="web1">
             	<div class="lft1"><a href="#" class="about-web-link">http://www.divanatlanta.com</a></div>
                <div class="rght1"><a href="#" class="about-mail-link">ajay0878@yahoo.com</a></div>
			</div>
          </div>
      </td>
    </tr>
  </table>
</div>
<div class="print noprint"><a href="javascript:window.print();" class="coupon-print-link">Print this Coupon</a></div>
</body>
</html>

We have also added the window.print() function on Print this Coupon link. This function print the current windows content. We can also print our page through File->Print… menu. But this function is useful when the toolbar and menubar are disabled.

A K Chauhan's Blog » Print

Create CSS Stylesheet and JavaScript for Print