![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/06\/printcss-400.gif\")
<\/p>\n<\/p>\n
A print style sheet is an extremely useful thing to have around. Most modern websites don\u2019t look all that attractive when printed using the site\u2019s default CSS: overly-large widths, screen-friendly fonts, and creative color choices all work together to make most sites less than useful on the printed page. But with a print CSS file, you can alleviate those problems and present your users with a useable, useful print alternative to your digital masterpiece.<\/p>\n
There can probably never be a true \u201cboilerplate\u201d print style sheet, something you can just apply to every website you create and be done — believe me, I\u2019ve been trying to develop one for quite some time! However, this tutorial and accompanying downloadable template<\/a> should help you on your way to building your own personally customized print CSS. And for some sites, it may not require any customization at all!<\/p>\n To start out, we\u2019ll set some default widths, margins, floats, and backgrounds on our major elements:<\/p>\n How many times have you printed a website only to find the right third of the page was missing? Setting the width to 100% on these elements ensures they\u2019ll never extend beyond the confines of the printed page. Setting a margin of zero ensures that our content hugs the default page margins \u2013 you can add more space here if you\u2019d like. Setting our float to \u201cnone\u201d helps get around some old-school print bugs, wherein floated objects weren\u2019t printed beyond the first page. And setting our background to a default white with no image is just good printing karma \u2013 why waste your users\u2019 ink on screen-centric niceties?<\/p>\n Next, we\u2019ll remove any elements that aren\u2019t needed on the printed page:<\/p>\n Here, I\u2019m suggesting that navigation, sidebars, and ads needn\u2019t be printed. You can add to and remove from this list as your needs require. It also wouldn\u2019t hurt to create a catch-all class (like .noprint) for individual elements you\u2019d rather not be rendered on the printed page.<\/p>\n We should also set some default body font faces, sizes, and colors:<\/p>\n I\u2019m setting the font-size here to 1em in order to keep the font size flexible. If you specify a point size (say, 12pt) or a pixel size, users won\u2019t be able to use the \u201cscale\u201d functionality built into most modern browsers, which would make your pages less usable overall. <\/p>\n I\u2019m also specifying a serif font for my print pages. Some argue that you should stick to whatever font you use on the screen for the sake of brand consistency, but I\u2019d argue that you can develop screen brand consistency, and<\/em> a separate print brand consistency. And if you\u2019d like to interweave the two, consider using a serif font for your screen headlines and a sans-serif font for your body text, then simply reversing the font families on the printed page.<\/p>\n And finally, I\u2019m setting the default text color to black. Your low-contrast design may look killer on the screen (who am I to judge?), but contrast is the name of the game on the page if you want your text to be legible.<\/p>\n Next up, we\u2019ll style our headings:<\/p>\n I\u2019m specifying a default font-family as well as a color (black again) for all of my headlines. Then, I\u2019m styling each headline uniquely so that they stand out hierarchically on the printed page. Most websites don\u2019t actually use six levels of headings, so you can change these around and eliminate lines to suit your needs.<\/p>\n And finally, we need to ensure that hyperlinks are usable in print:<\/p>\n The first set of rules sets our links to be dark blue, so they show up as blue on color printers and a dark grey (but not black) in grayscale. We\u2019ve also made them bold and underlined them to ensure they stand out from the rest of the page.<\/p>\n But what good is highlighting your hyperlinks on the page? It\u2019s not like anyone can follow them, right? Well, that\u2019s mostly true. But by using a little advanced CSS magic, we can make the anchor tags on your page a lot more useful. Using the :after pseudo-class and the content property, we can actually append<\/em> the achor\u2019s href to our hyperlink text. Now your users will be able to distinguish your links from the rest of your text, and even \u201cfollow\u201d them (albeit manually) if they\u2019d like. This trick doesn\u2019t work in Internet Explorer, sadly… but it doesn\u2019t do any harm to have the rule in there for the browsers who can use it.<\/p>\n And there you have it! A default print stylesheet template. If you\u2019d like to download a copy to use, just click here (right-click and save as).<\/a> Of course, this solution would work a lot better with a bit of customization, so feel free to change it up as you see fit.<\/p>\nbody, #content, #container {\n\twidth: 100%;\n\tmargin: 0;\n\tfloat: none;\n\tbackground: #fff url(none);\n}<\/pre>\n#topnav, #navbar, #nav, #sidebar, .ad, .noprint {\n\tdisplay: none; \n}<\/pre>\nbody {\n\tfont: 1em Georgia, \"Times New Roman\", Times, serif;\n\tcolor: #000; \n}<\/pre>\nh1,h2,h3,h4,h5,h6 {\n\tfont-family: Helvetica, Arial, sans-serif;\n\tcolor: #000;\n}\nh1 { font-size: 250%; }\nh2 { font-size: 175%; }\nh3 { font-size: 135%; }\nh4 { font-size: 100%; font-variant: small-caps; }\nh5 { font-size: 100%; }\nh6 { font-size: 90%; font-style: italic; }\n<\/pre>\na:link, a:visited {\n\tcolor: #00c;\n\tfont-weight: bold;\n\ttext-decoration: underline; }\n#content a:link:after, #content a:visited:after {\n\tcontent: \" (\" attr(href) \") \";\n}<\/pre>\n