Print CSS

Importance of Print CSS & How to Set it Up

Print CSS plays very strong part to make the page look beautiful on paper as well. As we live in Digital world we are viewing everything on devices, but sometimes we also need to print web pages for things like filing records, offline reading, etc…

In a digital world we look for very fancy designs with transparent backgrounds and high resolutions of images to make the page as beautiful as possible for users. We are too much inclined towards digital designs and often neglect how the page would look on paper. So when we take print out of any page, images, transparent backgrounds, gradients and different colours mess up with the readability on paper. It is very important to take care of how the page would look on paper.

I have come across many websites which looks superb on screens of desktops or devices but when it comes to print, the layout of the webpage is not good enough for reading offline. Print  CSS comes in picture to help us in this situation.

We can include a

  1. Inside main style sheet file with @media  query
  2. As an internal style sheet with <style>  as media=”print”
  3. As an external style sheet same as the main style sheet in <link>  as media=”print”

Print CSS

...
...
@media print {
   body {
      background: none !important;
      color: #000;
      font-size: 10pt;
   }
   body * {
      background: none !important;
      float: none !important;
   }
   #wrapper {
      margin: 0;
      width: auto;
   }
   article {
      border: 0;
      border-bottom: 1px solid #999;
   }
   a:link, a:visited {
      color: #000;
      text-decoration: none;
   }
   .logo {
      border-bottom: 1px solid #999;
   }
   h1 {
      font-size: 16pt;
   }
   h2 {
      font-size: 14pt;
   }
   h3 {
      font-size: 12pt;
   }
   h4, h5, h6 {
      font-size: 10pt;
   }
   nav, aside, footer {
      display: none;
   }
}

Above sample shows how the print css would look like inside main style sheet. I have included most common html  tags but we can include or remove tags as per needed in website. We can include this snippet in internal CSS or can create external css file and include with <link>  in <head> .

Reference

@media
How To Set Up A Print Style Sheet

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

Leave a reply:

Your email address will not be published.