Handle Printing Data with HTML using CSS

Introduction

In this tips, i going to share with you, how to handle the HTML Data to printing using CSS.Now days many websites offer printing features to user,what they are seeing currently in the browser.

This tips will help to you, how to ignore unnecessary contents(like ads,image,profile and etc),when users print content.

Problem

In my project I need to implement functionality where I have to print Order print receipt. But the real thing is I have to hide some part of page when I print page i.e hide  and I have to use same page for this.

Solution

The easy solution for this problem is you need to give one more style sheet for the print purpose by which you can hide those element which are not required. For this you require to use attribute

media = print

of the STYLE element. Following is small code for this issue

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style>
<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

or when you linking style sheet

<link css="" href="ScreenStyleSheet.css" media="screen" rel="stylesheet" type="" text="">
<link css="" href="PrintStyleSheet.css" media="print" rel="stylesheet" type="" text="">

Summary

So by using media type as print you can print only those element that you want. Even you can print element with the different style.