CSS Printing

Printing is an important aspect of any application or webpage. Print of a content can be made very different from its interface look. While printing a user may want to:

Use images with higher resolution for more clearer and better result.
Adjust the application's or website's layout, as per the size and shape of the page.
Enhance the overall appearance of the application or website on printing.
Provide additional styles only applicable for printing.

In order to manage all your printing needs and process, you may take an account of the points referred in this article.

CSS Printing - Using A Print Style Sheet

You can have a stylesheet explicitly for printing needs and link it to your code. Add the following code block in your html:

<link href="/path/to/print.css" media="print" rel="stylesheet" />

CSS Printing - Using Media Queries and @page At-Rule

CSS provides the @media at-rule, that can be used to set different styling needs for your webpage when printed on a page or displayed on screen, using the options print and screen, respectively.

You can add the following code block at the end of your stylesheet. This is an example.

@media print {
   /* All print related styles to be added here */
   #header-part,
   #footer-part,
   #nav-part {
      display: none !important;
   }
}

The above code snippet will not print the styles of #header-part, #footer-part, and #nav-part, while printing.

The various aspects of pages, such as, orientation, dimension, margin, etc. can be adjusted and modified using the @page at-rule. All the pages or sub-set of some pages can be targeted using this rule, while taking the print.

CSS Printing - Print Requests Detection

The events beforeprint and afterprint are sent by the browsers to let the content determine, when the printing may have occurred. This feature can be used to adjust the printing layout and the user interface during printing process.

CSS Printing - Using @page at-rule

In the following example, the content of the webpage is divided into sections, which when opened in print format, breaks into different pages and the margin of the pages is also set in the print format.

<html>
<head>
<style> 
   @page {
      size: landscape;
      margin: 15%;
   }

   section {
      page-break-after: always;
      break-after: page;
      background-color: aquamarine;
      width: 500px;
   }

   @media print {
   button {
      display: none;
   }
   }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

CSS Printing - Using @media Query

The following example demonstrates the use of a media query (@media), where a format or style is specified for screen display and the same content is changed for print format. On click of Print button, the page layout and style changes.

<html>
<head>
<style>
      @media screen {
         h2 {
            font-size: large;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: blue;
            font-style: normal;
         }
      }

      @media print {
         h2 {
            font-family: cursive;
            font-style: italic;
            color: red;
         }
      
      }

      @media print {
         button {display: none;}
            }

</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

CSS Printing - Use Of afterprint Event

Following example demonstrates the use of afterprint event and post printing the page closes itself and goes back to the last page.

<html>
<head>
<style>
   @media screen {
      h2 {
         font-size: large;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         color: blue;
         font-style: normal;
      }
   }

   @media print {
      h2 {
         font-family: cursive;
         font-style: italic;
         color: red;
      }
   }

   @media print {
      button {display: none;}
   }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });

      window.addEventListener("afterprint", () => self.close);
   </script>
</body>
</html>

CSS Printing - Link To An External Style Sheet

The print styles can be added in a file and the same CSS file can be linked to your html code, as an external stylesheet. Refer the example below:

<html>
<head>
   <link href="print.css" media="print"  rel="stylesheet" />
<style>
   @media screen {
         h2 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-style: normal;
            color: rebeccapurple;
         }
      
      }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });


   </script>
</body>
</html>

Print Page