<\/p>\n<\/p>\n
CSS doesn\u2019t apply exclusively to the Realm of the Screen. You can also write style sheets that apply to the medium that first spawned them<\/a> \u2013 print. This can be a very useful trick, since people read on the screen very differently than they read print documents. And your fancy-dancy layout may look stellar at 1024×768, but that doesn\u2019t mean it rocks equally at 8 1\/2″ x 11″.<\/p>\n So here are a few tips for creating a print style sheet that will ensure your website is user-friendly, regardless of the medium it ends up in. <\/p>\n How\u2019s that for a great opener? Specifying the style sheet in your code is the first step to a much more useable website. Here\u2019s how you do it:<\/p>\n The important part here is the media=\u201dprint\u201d option. This tells the web browser to only apply these styles to print media.<\/p>\n One nice trick you can use is to build your print style sheet to amend your screen style sheet. To do this, simply neglect to reference a medium in your screen CSS link, like so:<\/p>\n This causes your screen style sheet to be applied to both screen and<\/em> print. Meaning, your print CSS only has to describe the things you want to do differently.<\/p>\n Of course, if you want your print CSS to differ widely from your screen CSS, denoting all the differences between the two would be tedious. In that case, you\u2019d want to do something like this:<\/p>\n Specifying a media of \u201cscreen\u201d for your main CSS file means your print style sheet is building upon a blank slate. If you\u2019re making a lot of changes, this can be useful.<\/p>\n Not everything that is useful on the screen is nearly so useful in print. For example, the navigation at the top of your page, or the blogroll in your sidebar, aren\u2019t nearly so useful when they take up a full printed page and obscure your text. Consider hiding them in your print style sheet by creating a list of multiple selectors,<\/a> like so:<\/p>\n Then, as you come across more elements that shouldn\u2019t be in your printed version, you can just add them to the list.<\/p>\n While I\u2019m sure your 10-pixel-high cramped Helvetica looks so very avant-garde on the screen, people usually prefer a little more room when they\u2019re reading on the page. Try bumping up the font-size and line-height a little compared to the screen:<\/p>\n Serif fonts were created to make it easier to read words on the printed page. The serifs (the little \u201cfeet\u201d at the bottoms of letters) help the eye define the edges of the letters and lines on the page. Sans-serif fonts, on the other hand, were invented for the screen: the serifs on low-resolution monitors and at small sizes tend to make the letters look a little fuzzy. So while Helvetica may be a great choice for the screen, perhaps Georgia would be better suited for the page:<\/p>\n Pixels are a useful unit of measurement when dealing with the screen, but they lose some of their usefulness when you move to the printed page. At that point, it\u2019s useful to remember that in CSS, you\u2019re not limited to setting sizes in pixels, percentages or ems. You also have inches, centimeters, millimeters, points, and even picos at your disposal. Make use of them:<\/p>\n What other print style sheet tips have I missed? Share the love in the comments!<\/p>\n1: Specify a Print Style Sheet<\/h3>\n
<link rel=\"stylesheet\" href=\"print.css\" \nmedia=\"print\" \/><\/pre>\n
2: Build On Your Screen CSS<\/h3>\n
<link rel=\"stylesheet\" href=\"screen.css\" \/>\n<link rel=\"stylesheet\" href=\"print.css\" \nmedia=\"print\" \/><\/pre>\n
3: Wipe Out Your Screen CSS<\/h3>\n
<link rel=\"stylesheet\" href=\"screen.css\" \nmedia=\"screen\" \/>\n<link rel=\"stylesheet\" href=\"print.css\" \nmedia=\"print\" \/><\/pre>\n
4: Hide Extraneous Elements<\/h3>\n
#navigation, #blogroll {\n\tdisplay: none;\n}<\/pre>\n5: Bump Up Font Sizes and Line-Heights<\/h3>\n
body {\n\tfont-size: 120%;\n\tline-height: 130%;\n}<\/pre>\n6: Move to Serif Fonts<\/h3>\n
body {\n\tfont-family: Georgia, \"Times New Roman\", \n\tTimes, serif;\n}<\/pre>\n7: Think in Inches and Points<\/h3>\n
body {\n\tfont-family: Georgia, \"Times New Roman\", \n\tTimes, serif;\n\tfont-size: 12pt;\n\tline-height: 18pt;\n}\nbody #container {\n\tmargin: 1in 1.2in .5in 1.2in;\n}\n<\/pre>\n