Print Style Sheet : What is Print Style Sheet ? How to Set up Print Style sheet ?

Print Style Sheet : What is Print Style Sheet ? How to Set up Print Style sheet ?

What is Print Style Sheet ?

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper.

How to set up Print Style sheet ?

The best method is to start from scratch and rely on the default style sheet of the browser, which takes care of the printed output pretty well by default. In this case, insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule:

@media print {
   …
}







For this we have to do two things 

1. Include all screen styles in the separate @media screen {…} rule;
2. Omit the media type for the condensed style sheet: 
<link rel="stylesheet" href="css/style.css"/>

or we can write like this :

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

 Now ready to add print style sheet ? Thinking about how to write styles?? 
Check the below example: 

   * Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}

/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}

Every thing done, Still have an issue with printing background colors  & Images ?
Here is the solution :

How to get Background Colors & Images in Pirnt ? 
How to get Background Colors & Images in Print pdf file created in Chrome ? 

It's simple,

Add 
"-webkit-print-color-adjust:exact; " property in body styles.

Ex:
body {background-color:#fff; font-family:arial; font-size:15px; background:white; -webkit-print-color-adjust:exact; }