CSS Print Style Sheets - Examples [closed]

Question

Trying to learn about how to effectively use print.css, so that graphical and navigational elements are not shown in print preview/print. Read some articles, and part of print css of html5 boilerplate. Two sites, which was quite impressive the way they change the look during print are

http://css-tricks.com/

http://bottlerocketcreative.com/

But I cannot see the css related to print. Can you please point to the css they use to learn how to do similar transformation.

Answer 1

I have had a look at the sites you linked to and they do not appear to have any print styles associated with them. I believe they are using the browsers default print settings. So one of the big changes is background images being hidden default. For CSS-Tricks, the reason it might look so different is because it uses media queries. So if you narrow your browser to 800px or less, you will see that the list of posts expand to the full width of the browser as they do when the document is printed.

However in general, print styles are either set using a media tag in your existing stylesheet:

@media print{
    /*styles here*/
}

or linking to a stylesheet specifically for print purposes:

<!--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">