We take for granted that we are styling the web site for the screen, but we should not forget that its also important to create a style sheet for when a user prints the web site. You can imagine that a potential client can print out a page from your portfolio to show to someone else at a meeting for a potential treatment of whatever project they are working on. <\/p>\n
The most useful thing is to remove some of the clutter. When a user prints a page, they do so for the content. Do them the favor and hide all that is not necessary. The footer, navigation and other unnecessary elements can be set to Add your additions to the print styles at the bottom of the page in the boilerplate:<\/p>\n Fonts are often larger on the screen than in print, so set the font to serif 12points in size: It is likely that the page is horizontally laid out for a screen. You may want to rearrange the elements vertically for the printed page.<\/p>\n Information can be added by using the content attribute before the header, for example, so you can customize the printed page: It’s possible to print out the actual link address after the links using Check to see how your page prints out, and add styles to the print section of your CSS style sheet if needed. <\/p>\n","protected":false},"excerpt":{"rendered":" We take for granted that we are styling the web site for the screen, but we should not forget that its also important to create a style sheet for when a user prints the web site. You can imagine that … Continue reading display: none; <\/code>. The remaining elements often need their screen styles neutered, and the properties have to be rewritten to clean up the print style. The browser itself applies a print style to the page, removing the background, etc, and the HTML5 Boilerplate has print stylesheet, but you still may need to tweak it yourself.\n<\/p>\n\r\n\/* ================================================\r\n Print styles.\r\n \r\n ================================================ *\/\r\n<\/pre>\n<\/p>\n
p { background: white; font: 12pt\/14pt \"Times New Roman\",Georgia,Serif; }<\/code> and h1, h2, h3, h4, h5, h6<\/code> to appropriate sizes. <\/p>\nRearrange It<\/h2>\n<\/p>\n
Adding Information Using CSS<\/h2>\n<\/p>\n
header:before { content: \"Contact artist for more info, telephone number, email and website, etc\"; }<\/code> or anything else you want the printout to have.\n<\/p>\n a:link:after, a:visited:after { content: \" (\" attr(href) \") \"; } <\/code> but that prints out all links, so you may want to limit that to to the article<\/code> tag. This is already taken care of for you in the boilerplate.\n<\/p>\n