Create Printer Friendly Blog Pages with Simple CSS

C
Published in: Code - CSS - Print

eco printer friendly blog

Jay White writes - “Have you found a good way to allow readers to print individual post content without all of the sidebars, ads and headings messing up the print format?”

Extra stuff like logos, forms, navigation links, advertising, blogrolls, flash widgets, etc may look good when your blog page is viewed inside the web browser but these elements are almost useless for people who want to print out web pages on paper.

How to Create Printer Friendly Web Pages with a Print Style Sheet

With little effort, you can turn your blog into a printer friendly and environment friendly website (since readers will consume less ink and paper when printing your articles).

Step 1: Create a new CSS File (let’s call it print.css) and add the following lines:

// Black Text on White Background
body {
  font-family: arial,helvetica,sans;
  font-size: 13px;
  background:fff;
  color:000;
}

// Do no underline links
a, a:visited,a:link {
  color:#000;
  text-decoration:none
}

.noprint {
  display:none
}

Step 2: Open the HTML source of your main blog template and enclose everything other than the content (like the sidebars, ad blocks, header logo, footers, etc) inside the following <span> tag

<span class="noprint"> ..... </span>

You are instructing the browser not to print anything that appears inside the above tag.

Step 3: Add the following line inside the <HEAD> tag of your blog template

<link rel="stylesheet" media="handheld,print" href="print.css" />

That’s it. To see how this works, choose File->Print Preview from your browser’s menu or press Ctrl + P.

This technique is not just effective for printed version of your web pages but even for PDFs - if someone prints your blog as a PDF document, they’ll see a clean version of the article without the extra bells-n-whistles. See - ”Print to PDF Button for Blogs

Previous: How to Enable Printer Friendly Blog Pages

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Code - CSS - Print

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account
G

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube