CSS Print Style Sheets - Examples

Question

Trying to learn how to use print.css effectively so that graphic and navigational elements do not appear in preview / print mode. Read some articles and the print css html5 part. Two sites that were very impressive in how they change their appearance during printing are

http://css-tricks.com/

http://bottlerocketcreative.com/

But I don't see css related to printing. Could you please point out the css that they use to learn how to do such a conversion.

Answer 1

I looked at the sites you linked to and they have no related print styles. I believe that they use the default print settings for browsers. Thus, one of the big changes is the background images hidden by default. For CSS tricks, the reason it might look so different is because it uses media queries. Therefore, if you limit your browser to 800 pixels or less, you will see that the message list expands to the full width of the browser, as when printing a document.

However, in general, print styles are either set using the media tag in the existing style sheet:

@media print{ /*styles here*/ } 

or links to the stylesheet specifically for printing:

 <!--These styles styles are only for screens as set by the media value--> <link rel="stylesheet" href="css/main.css" media="screen"> <!--These styles styles are only for print as set by the media value--> <link rel="stylesheet" href="css/print.css" media="print">