Every website should have it's own css file that define how the pages will looks properly on tha peper not only the screen .Imagine you were to print a web page exactly as it appears on your screen , you will wasting a lot of ink and paper.The print style can decrease a lot of ink  and increase the user experience and make you website more friendly .

First i want to show the difference  between  the other popular  media types .

All : used for all media the devices .

Print : used for documents viewed on screen in print preview mode.

Screen : used for color computer screen .

there are many type of media types such as (braille, handheld , speech and tv) but they are  not popular.

1 - Creating a print.css file .

The first thing to do is to create a new css file that dictates how a page looks when printed and set the media property to print .

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

You can also use one stylesheet for all media by set the media property to all

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

or you can use one stylesheet for more than one media by separate the media types with comma

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

Use the first method for the print type and the other two methods are just for more information about the media types .

2 - style  your text and  links

The best type face for print to choose is Serif  which more suitable to print style and is more easily readable, and set the color to black .

set the font size to PT rather tan PX, and your code will simply like this

body { 
 font-size: 12pt; 
 color: black;
 font-family: "Times New Roman", Serif; 
} 

another way to show links is to change the color to the standard blue color which easy to recognizable , make font-weight to bold and make the text underlined as you can see below

a:link, a:visited { 
 color: blue; 
 font-weight: bold;
 text-decoration: underline;
} 

when we print links we can't deal with the href value because it's already hidden, but we can use a great trick to display the value of the href attribute , after every anchor in the page .

By using the :after pseudo-element we can achieve that

 a:link:after, a:visited:after {
  content: " (" attr(href) ") ";

}

in this code we show a set of parentheses around the URL and placed two quotes around it, and then we insert the attr(x) function to display the URL .

now let's see what is the deference before and after the print style

3- Save the user's ink

How many ads and images on your page, you don't want to display in the final printout such

as #sidebar, #ads, you can use the css display : none to hide them

 #ads, #header, #comments {
 display: none;
 } 

by hidden theses sections you not only save the user's ink but also you can customize you

sections as you like an important rule the can make the print more friendly is to turn off any background images .

body {
 background: none;
}

By adding a simple lines of css you can increase the user experience and make you website more friendly .
Try it and and if you get any problem don’t hesitate to tell me .Thx.

Why not leave a comment ?

If you enjoyed the article it would be really appreciated if you could spare some time to leave a comment to share your thoughts on the article.
You can follow me on Twitter or subscribe for rss