In this time , we are in the age of internet. We are doing our important work in the internet . If you are thinking to travel , you should booked the ticket for train , bus or air plain and print the e-ticket . Every day , we print the ton of papers in our natural work.Webmaster really forget to set up the Print Style Sheet for better print the web page .
Using the
}
}
}
}
Resource:
1. 10 Tips for Better Print Style Sheets
2. CSS-Tricks Finally Gets A Print Style sheet
3. Create a Customized Print Style sheet in Minutes
Why is Print Style Sheet used in website ?
In any website, the design and layout of the website have been made with many sections or elements.When you print the web page , you don't need to print the all section of the page. Print Style Sheet is effective in this situation . Header , Footer , Navbar , Sidebar are the sections of web page.All the section is not need for print .
Start building the Print Style Sheet :
Now you need to know , how to link the print Style Sheet in Header of the web page .After write the Print Style Sheet in print.css file , connect the print.css file using the link tag in Header section of the web page .
Here set up the Print Style Sheet.
Here set up the Print Style Sheet.
1. print.css code :
Starting line of the code of print.css file is like
@media print { ..... } .2. Remove the Header with navigation :
When you are building the printed version of website , some times header with the navigation link are useless for print page.Using the
display attribute in the css .@media print {
#header { display :none ; } }
3. Reset the Background color :
When you want to print web page , you should be change the page background color white.
@media print {
body { background :white ; } #content { background : transparent ; } }
4. Change the Font size:
In print , 12 points is standard for print the page.
@media print {
p { font-size : 12pt;}}
5. Reset Text Color:
Now time is to reset the text color for better viewing the printable page. If the page color is white , then text color should be dark or black.
@media print {
body { color : #000;}}
Good printable view :
Here some website do the great job in print style sheet.
Here some website do the great job in print style sheet.
Resource:
1. 10 Tips for Better Print Style Sheets
2. CSS-Tricks Finally Gets A Print Style sheet
3. Create a Customized Print Style sheet in Minutes