How To Create A Simple Print CSS For Your Site

How To Create A Simple Print CSS For Your Site

Print CSS is a Cascading Style Sheet intended for print documents when users want to print the web page for reference. It applies to document view in print preview mode as well, therefore you can preview how the print document looks like after you have made amendment on your Print CSS.

Print CSS

Live Demo: Menu Bar -> File -> Print Preview or Alt + F then V.
View Full Print StyleSheet

What happen if there is no Print CSS for the web page?

Below is the example of OXP without a Print CSS. You might want to check out other web pages by going to the Menu Bar -> File -> Print Preview to preview the print web page. Most of the web pages do not have a Print CSS, therefore you can see that the alignment, layout, colour and font are all in their default.

OXP without Print CSS

So how does it look like after adding the Print CSS?

Well, styling Print CSS is the same as styling a normal StyleSheet, you can make any changes you prefer. Thus, it’s definitely going to look better, the formatting and alignments become neater, users will be able to read and print easily. Below is how it looks like after applying the Print CSS.

OXP With Print CSS

Below will be a tutorial showing you how to get started by doing one Print CSS for your web page.

Include Your Print CSS At the Head Tag

Simply include your print.css at the Head of your web page.. Note that the media is now set to print and not screen.

<!-- Include Print CSS -->
<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />

Print StyleSheet

Now we move to the Print StyleSheet, writing a Print CSS is the same as writing normal CSS. Below are just some of the few important pointers to take note, the rest of the styling are as usual.

Reset the Style
You will need to do a reset for all the padding, margin to default even you already did it for your main web page CSS. Next, you will also need to declare the fonts that you think that will look good in the printed document in the body.

/*Reset Style*/
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;}

Remove Extra Element
There are elements that is not needed to be on the print document, like the Search bar, Sidebar, Sponsor, Social Bookmarking in the single post and so on. Therefore we can just remove all these elements, by declaring display: none; in the CSS.

/*Remove Element*/
#logo, #catnavi, .topnavi, .more-link, .navigation, #sidebartop, #related, #social, #sponsors, .tabs, #allpost, .toolbar, .splitbox, #commentform, #commentabs .idTabs, .postmeta-content .comments, #respond h3, .tag, .footerlinks {display:none;}

Display URL in Print Document
On web page, you will be able to click on link if there is an URL. However for printed document, user cannot click on the link, so we will need to show them the URL so that the user can know that is a link and go to that page.

/* Show URL */
a:link, a:visited {background: transparent; color:#333; text-decoration:none;}
a:link[href^="http://"]:after, a[href^="http://"]:visited:after {content: " (" attr(href) ") "; font-size: 11px;}
a[href^="http://"] {color:#000;} 

Give a Page Break
For example, your user only want to print the content but not the comments in a single post view. What you can do is by declaring page-break-before: always; in the CSS, it will push that section to a new page.

/*Break Page*/
#comments {page-break-before: always;}

Live Demo: Menu Bar -> File -> Print Preview or Alt + F then V.
View Full Print StyleSheet

If your web page does not have a Print CSS, why not try doing one now! If you have any other Print CSS information or technique to share, please go ahead and leave your comments below.

Comments

  1. / Reply

    I learn something new every day. Although I’ve never actually done a print style sheet before, a lot of this is pretty obvious stuff, but one thing I did learn is the “pagge-break-before”
    Thanks

  2. / Reply

    Really Awesome Post.

    Thanks you very much for your sharing :)

  3. / Reply

    Great resource about CSS. This really helped me fine tune our site. Thanks.

    • kit,
    • September 3, 2010
    / Reply

    Some great tips. Thx. Although it would be helpful to have browser compatibity with the suggestions

  4. / Reply

    Wow! Nice reveal of the URL without having to use SPAN. Very nice article in general, but I’ve not yet seen the URL reveal technique. Thank You!

    Mike

    • Endy,
    • July 26, 2011
    / Reply

    thanks for the post….
    But i wanna ask…
    There are many sites that provide facilities to be able to print one page …
    So much good about where the tutorial above ..?

  5. / Reply

    This is a great help, especially in a latest project of mine. Implemented here and works perfectly: http://www.latteperday.com/easy-billing/

    Before that, the printed page looked pretty dire :p

    Thanks

    • MuraliKrishna,
    • November 5, 2011
    / Reply

    Hi,

    In my webpage i want to print the page with background colour at one of the heading.That heading i kept at tag.and used the

    In print.css i wrote the style as

    .colBg{background-color:#c0c0c0;}

    And i define class=”colBg” at the tr tag.

    But while i am taking print the background colour is not printing.Can anyone please figure it out.

    Thanks in advance……

  6. / Reply

    Very nice article, it is useful, thanks.

    • Srinivas,
    • August 7, 2012
    / Reply

    Very nice & helpful article. Thanks a ton for sharing.

  7. / Reply

    Nice post. thanks. :)

    • Michael G. Yanko,
    • August 30, 2013
    / Reply

    I need some help with mine http://a-better-dj.smugmug.com/

    • Morgan Riehl,
    • September 21, 2013
    / Reply

    How do you create a button on your page that is a “Print this article” button? Got the stylesheet working great!

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals