CSS - Print

css

http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/ - 10 Tips for Better Print Style Sheets
http://css-tricks.com/dont-rely-on-background-colors-printing/ - Don’t Rely on Background Colors Printing
https://code.google.com/p/hartija/
http://net.tutsplus.com/tutorials/javascript-ajax/learn-how-to-style-articles-for-print-and-email/ - Learn how to style articles for print and email
http://davidwalsh.name/css-print-page-breaks - CSS Print Page Break
http://www.yourinspirationweb.com/en/how-to-make-an-effective-print-style-sheet/
http://24ways.org/2007/back-to-the-future-of-print - Back To The Future of Print
http://www.alistapart.com/stories/goingtoprint/
http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
http://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page
http://www.w3schools.com/tags/att_style_media.asp
http://www.w3schools.com/css/css_mediatypes.asp
http://www.smashingmagazine.com/2013/03/08/tips-and-tricks-for-print-style-sheets/

How to implement a print style sheet?

<style type="text/css" media="print">
    body {
        margin: 8px;
    }
</style>

Can we have print and screen styles in one style element or stylesheet?

Yes. We can also have print and screen styles in one style element or stylesheet:

<style>
@media screen {
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
    p.test {font-size:20px;color:red;}
}
@media screen,print {
    p.test {font-weight:bold;}
}
</style>
<link media="print" href="styles.css" type="text/css" rel="stylesheet">
@media print
{
    .myStyle { display: none; } 
}

How can we emulate print media?

In Firefox you can type Shift+F2 to open a Developer Toolbar command line, and then type:

media emulate print

You can also emulate other media types this way.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License