Line25

Handy Tips for Creating a Print CSS Stylesheet

Read the full post

Print stylesheets often come as a secondary thought on many websites, after all, who prints a webpage anyway?! Despite their slightly infrequent use, a print stylesheet can really help polish the printed document for when it is used. It doesn’t take too long to create, so let’s take a look at some handy tips that you can put into practice on your own site.

For this example, we’ll be going through the process of building the print stylesheet for Line25. Being a design blog there’s plenty of articles that users might want to print to refer to; for instance a user might want to print a tutorial to save switching applications; print an article for a meeting; or simply rest their eyeballs from the computer screen and read in bed.

Adding some Fancy Styling

With a bunch of objects removed the print styling is taking shape, and has dramatically reduced the number of pages in use, which all helps save the world. Captain Planet would be proud! Now we can take a look at styling up the text to make things look pretty. It’s a common fact that sans-serif typefaces are the most legible in print, so setting the global font to Georgia is a good start. Those blue links aren’t really too useful, so we can also target those and set them to black.
Finally, the H1 and H2 introducing the page could be simply styled using the font-size, font-style and text-align properties. There’s no need to go to town on colours, keep everything basic and economical for the printer by using structured heading sizes and subtle touches.

#header h1 {
	text-align: center; 
	font-size: 42pt; font-style: italic;
	margin: 0;
}
#header h2 {
	text-align: center;
	font-size: 10pt;
}

Print preview with added styling

Display Link Destinations

You obviously can’t click links on a printed page, so it would be quite handy to display the URL in the printed document so the user could follow up the link when back at the computer. This nifty trick uses some CSS magic, but unsurprisingly it doesn’t work for IE. By using the :after pseudo selector, we can add the attribute from the anchor as small text in brackets after each link.

#main p a:after {
	content: " ("attr(href)") ";
	font-size: 10pt;
}

Print preview with links displayed

Split Comments Onto a Separate Page

On one hand, it would be more economical to simply add the comments to the hidden elements to save a number of extra pages being printed. But on the other, there’s often a good collection of tips, resources and advice from people adding their input to an article. With this in mind the simple page-break-before property comes in handy to push the start of the comments onto a new page. This means the user can then decide whether to print the full document, or exclude the last few pages of comments.

#comments {
	page-break-before: always;
}

Print preview with separated comments

The Final Stylesheet

So, that’s it! A few handy tips for creating your own print stylesheet. The complete stylesheet for Line25 is made up of just a few lines of CSS, but it completely transforms the printed document into a more useable and readable piece of information.

body {
	font-family: "Georgia", Times New Roman, Serif;
	color: #000;
	background: #fff;
}

#nav, #side, #footer, .post-meta, #respond, .reply, .post-info {
	display: none;
}

#header h1 {
	text-align: center; 
	font-size: 42pt; font-style: italic;
	margin: 0;
}
#header h2 {
	text-align: center;
	font-size: 10pt;
}

#content h2 {
	font-size: 32pt
	font-style: italic;
}

#content h3 {
	font-size: 18pt;
	margin: 0;
}

a {
	color: #000;
	text-decoration: none;
}

#main p a:after {
	content: " ("attr(href)") ";
	font-size: 10pt;
}

#comments {
	page-break-before: always;
}

ol.commentlist li {
	list-style: none;
	border-bottom: 2px solid #eee;
	margin: 0 0 10pt 0;
}
	ol.commentlist li div.comment-meta {
		font-size: 6pt;
	}
Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.Kadolog.com Olivier

    Thanks Chris for this article…

    I just need to re-design the print css of my site. But I am wondering if there is a way to view the result of the print.css in “real-time” on my screen. I would like to be able to debug the change done to the print.css with firebug.

    Any tips to achieve this ?

    Thanks….

    • http://inspiredbywordpress.co.uk Daniel Groves

      Can’t be done. The closest to “real-time” you can get is print-preview, which (I don’t think) you can use Firebug in.

      If you search around you might be able to find a open source program to do the job though,

      • http://luminarydesign.com Nathan

        If you use the Web Developer’s Toolbar, you can display the CSS by media type (i.e. Print). Firebug will work fine with it. You can still select elements in that view.

  • twisty

    Hi there, another great article. Simple but often overlooked.
    I think you meant to say serif typefaces are the most legible not sans-serif, but i knew what you meant :)

    Olivier, just change the print css to display screen, comment out your screen css and use firebug. When you’re all done change them back to their respective screen and print.

  • Michael

    @Olivier.
    Can you not just change the media to ‘screen,projection’ and use that as the sole stylesheet rendering the page?

    Then view it in your browser?

    You’re right, a plugin would be nifty. I’m sure I’ve seen one in the ‘Web Developer’ toolbar.

  • http://romirockstar Romi

    thanks for sharing now a days im learning css its helpful for me.
    follow me@rockstaronline

  • http://www.zenelements.co.uk/blog/ Alex

    Another great article, Chris. CSS:Print is something I think many people skip past and I know I’ve been guilty of it occasionally myself!

    A very clear and invaluable guide though. Thanks for sharing!

    Alex | @ZenElements

  • Anonymous Coward

    @Michael
    Yup, it’s at Web Dev > CSS > Display CSS By Media Type > Print

  • http://pauldewouters.com paul

    It seems like there is a part of the article missing between the intro and “adding some fancy styling”

  • http://www.Kadolog.com Olivier

    @Twisty The CMS (Drupal) do not let me change easily the media type of the CSS to use.

    @Michael : Web Developer toolbar… You’re rigth !! Thanks for the reminder…

  • http://worldfamos.blogspot.com Chethan T

    Hey Your Tutorials are so lively!
    Thank You.
    Keep up the good work )

  • http://www.zeusboxstudio.com kuswanto

    Wow.. nice post. I haven’t consider learning the CSS print sheet properly. Yours are good way to start.

  • http://dealfreezer.com/blog.php web2000

    hey nice tutorial here “handy tips for creating a pring css stylesheet” – *just a note* – you need to declare the stylesheet in the head of the html document (media=”print”) so the browser knows to request it when the user hits the print button!

  • http://www.redesignyourbiz.com/ I Love My Work

    wow, really nice tips.

    thanks for the same.

  • http://www.monstercable.com Andrew Taylor

    Has anyone checked out PrintFriendly.com/button? Was thinking to add it to my site instead of building print css but wondering what others thought.

  • http://twitter.com/michaelstrelan Michael

    @Olivier
    You can change the media of the css in Drupal in template.php

    Eg.
    drupal_add_css(path_to_theme() . ‘/print.css’, ‘theme’, ‘print’, TRUE);

    Just change ‘print’ to ‘all’. And you might have to clear out your cache in /admin/settings/performance

  • twisty

    The other guys are right, just use the web developer toolbar to display the print css instead of screen, then use firebug to code your css in real time. I didnt know about that feature in the WDT, it’ll save even more time!

  • Matthew

    I think its also nice to set your print stylesheet as an alternate stylesheet, that way you can easily switch between them in nice browsers like firefox without any add-ons. I don’t know if this is possible for Drupal though.

  • http://www.nettutes.com Presima

    Awesome tutorial. Thanks

  • http://www.shahin.co.nr Shahin – Rolam Shahin Designs

    Thanks for this Chris. One of the best article so far on Line25 :)

  • http://www.cbgrafica.com Luis Ahmed

    Thanks a lot Chris, that is why a love css, simple and so powerful.

  • http://www.blogreign.com/ Wallace

    Thanks for the great article, it might work for my new site. :)

  • http://disordereddesign.com Krystian

    display: none and :before pseudo-element are two main css tricks in printer stylesheet. Check also Eric Meyer’s article in ALA http://www.alistapart.com/articles/goingtoprint/

  • http://www.sonichtml.com/en/ sonichtml

    nice,thank you for shared..

  • http://www.ntiremedia.com ntiremedia

    nice work budyy and keep it up ill visit ur blog again soon i like it and it interesting …..

  • http://tutorial-city.net Tutorial City

    Very useful! I’ll use something like this in my next projects.

  • http://yorik.orgfree.com Yorik

    Excellent tips! Much stuff I didn’t know yet… Thanks a lot!

  • Hero

    thank you so much!

  • Stomme poes

    Ah, I liked seeing the use of page-break-before. FF seems to have this as some sort of stylesheet default for fieldsets who are longer than a page or something.
    Also, Twisty already pointed this out, but again, georgia is SERIF and you did seem to mean “serif” instead of “sans-serif”.
    I also liked the tip in the comments of using the Toolbar to view CSS by type. Yet another feature I’ve ignored. Thanks!

  • derp

    “With a bunch of objects removed the print styling is taking shape, and has dramatically reduced the number of pages in use”

    uh, did you skip a few steps or something?

    it seems like there was supposed to be something before this, but there’s just the introduction.

  • http://www.novak.si Kuhinjske Nape

    Excellent post on a very important topic. Nice job!. Good blog, thanks!

  • http://www.prestissimo.nl Sander

    To test if everything is working use the Webdeveloper toolbar addon for firefox. It has an option to show the print version of the page.

  • http://www.nomiinfotech.com/ nomi

    These tips are very helpful to us.

  • http://www.yoan.nl Joan

    I always get excited when I encounter CSS code that I didn’t know of.
    content: ” (“attr(href)”) “; = CSS magic indeed!
    Keep up the good work!

  • Vicky

    “It’s a common fact that sans-serif typefaces are the most legible in print, so setting the global font to Georgia is a good start.”

    Hmm… sans-serif most legible in print? Georgia, sans-serif?

  • Sam

    Thanks! Just needed this for school!

    :D

  • http://inspiredbywordpress.co.uk Daniel Groves

    Nice tutorial Chris. I think I shall have to finally get round to doing mine this weekend.

  • http://designinformer.com Design Informer

    Great tips. I haven’t ever used print style sheets before, I think it’s about time for me to learn. Thanks!

  • http://borgetsolutions.com Siddharth Menon

    Hey thanks …

    Few more tips to add up ;)

  • http://www.jmc-website-design.co.uk/blog Jason

    I think its exciting to use different css stylesheets for one website, like playing around with different displays like PSPs, phones etc

  • http://www.studioweber.com Alex Flueras

    I have to admin I haven’t used print css at all actually. I will definitely start using it. Thanks for this article.

  • http://www.fpolitics.com/ Politics

    These are good tips and easy to learn.
    Thank you

  • http://www.estudentaid.com/ student aid

    Good tutorial.

  • http://www.ningbohotelreview.com Ningbo Hotels

    THANK YOU Chris for this interesting article!

    Even geeks often ignore readers who might want to print a few pages and without a stylesheet, it always end in a total mess with the printer wasting a lot of paper…Not very eco-friendly :-(

    So yes a Print CSS stylesheet is always welcome and your tutorial here helps :-)

    BTW I added a comment line on top of my printed pages using the following code :
    #content:before {content: "This is a printer-friendly version. The navigation and other unnecessary elements have been removed. For all details visit us at http://www.xxxx.com";

    I like this comment but can only get it in Firefox, not in IE.
    Have you Chris (or you Readers) any idea on how to make this work in IE?

    THANK YOU and keep up the good work!

    Jamy