@media print { /* All your print styles go here */ /* Smashing winery Example site for article at Smashing Magazine by Christian Krammer, ck@css3files.com Print style */ /* Reset quotes */ q { quotes: none; &:before, &:after { content: ""; } } /* Hide everything unneeded */ header { h1, nav { display: none; } } footer, img { display: none; } /* font sizes */ body { font: 12pt Georgia, "Times New Roman", Times, serif; line-height: 1.3; color: #000; } h1 { font-size: 24pt; } h2 { font-size: 14pt; margin-top: 25px; } aside h2 { font-size: 18pt; } /* Show printer-frindly logo. */ header .print { display: block; } /* If you like things a little bit easier and more semantic you can alternatively just leave the h1 of the header visible, switch off the margin and make it bigger than the rest of the headlines */ /*header nav, footer, img {display: none} header h1 { margin: 0; font-size: 30pt; }*/ /* Some browsers like to show a border around images. Switch it off */ img { border: 0; } /* Mover the header a little bit awy from the content */ header { margin-bottom: 40px; &:after { display: block; content: "www.smashing-winery.com"; } } /* Display the URL of the site so that the user knows where the printout came from */ /* Additionally/optionally a little message could be displayed */ /*header:before { display: block; content: "Thank your for printing our content at www.smashing-winery.com. Please check back soon for new offers about delicious wine from our winery."; margin-bottom: 10px; border: 1px solid #bbb; padding: 3px 5px; font-style: italic; }*/ /* Separate blockquotes a little bit from the rest */ blockquote { font-size: 13pt; font-style: italic; } /* By default links are blue. For optimal legibility change them to black */ p a { color: #000; &:after { content: " (http://www.smashing-winery.com/" attr(href) ")"; font-size: 80%; word-wrap: break-word; } &[href^="http://"]:after, &[href^="https://"]:after { content: " (" attr(href) ")"; } } /* Show the URL after each link, whereby internal links are preceeded by the site's URL */ /* External links don't get this treatment */ /* Append the source of the citation */ q:after { content: " (" attr(cite) ")"; } /* The Sidebar is placed under the content automatically. To distinguish it from the rest a border and a gap is set before */ aside { border-top: 1px solid #bbb; margin-top: 30px; display: block; /*page-break-before: always; */ /* Moves the sidebar to new page */ } }