HTML Print Styles

HTML Print Styles: Using @media print in CSS

When you design a website, you might want your content to look great not only on screen but also on paper. HTML print styles let you customize how your webpage prints, ensuring a clean and professional hard copy. In this article, we’ll explore what @media print is, how to use it, and see a real-world example.

What Is `@media print`?

The @media print rule in CSS applies styles only when a document is printed. It tells the browser, “When printing this page, use these rules instead of the ones for the screen.” This feature is perfect for adjusting layouts, hiding elements, or changing colors to make printed pages easier to read.

Why Use Print Styles?

Using print styles has many benefits:

Improved Readability: You can adjust font sizes and colors to suit printed material.
Cleaner Output: Hide unnecessary items like navigation menus, ads, or sidebars that don’t belong on paper.
Efficient Use of Paper: Remove background images or colors to save ink.
Professional Appearance: Customize headers, footers, and page breaks to create a well-organized document.

How to Write Print Styles

To create print styles, use the @media print rule in your CSS file. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Print Styles Example</title>
  <style>
    /* Default screen styles */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f0f0f0;
    }
    header, nav, footer {
      background-color: #333;
      color: white;
      padding: 10px;
      margin-bottom: 20px;
    }
    main {
      background-color: white;
      padding: 20px;
    }
    
    /* Print styles */
    @media print {
      /* Hide navigation and footer when printing */
      nav, footer {
        display: none;
      }
      /* Change the background to white and text to black for readability */
      body {
        background-color: white;
        color: black;
      }
      /* Ensure the header remains visible */
      header {
        background-color: #fff;
        color: #000;
        border-bottom: 1px solid #ccc;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <main>
    <h2>Welcome!</h2>
    <p>This page is designed to look great on both screen and print. When you print this page, the navigation and footer will not be displayed.</p>
  </main>
  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
</body>
</html>

In this example:

Screen Styles: The page has a colorful design with navigation and footer visible.
Print Styles: The @media print block hides the navigation and footer, changes the background to white, and sets text color to black, ensuring that the printed page is clean and easy to read.

Real-World Example: A Blog Post

Imagine you run a blog. Your readers might want to print your articles for offline reading or sharing. With print styles, you can remove sidebars, ads, and unnecessary links. You can also adjust the layout to focus solely on the article content.

For instance, you could use the following code in your blog’s CSS:

@media print {
  /* Hide sidebar and ads */
  .sidebar, .ads {
    display: none;
  }
  /* Adjust article margins for a better print layout */
  .article {
    margin: 0;
    padding: 10px;
  }
  /* Add a page break before each new article */
  .article {
    page-break-before: always;
  }
}

This approach ensures that when readers print an article, they get only the content they care about, without any distractions.

Best Practices for Print Styles

Test Thoroughly: Always preview your print styles using your browser’s print preview feature.
Use Simple Layouts: Keep print layouts simple. Avoid complex grids and animations.
Optimize Colors: Use high-contrast color schemes suitable for black-and-white printing.
Hide Non-Essential Elements: Remove elements like navigation menus, advertisements, or interactive elements that don’t translate well to print.
Consider Page Breaks: Use properties like page-break-before or page-break-after to control how content is divided across pages.

Conclusion

Using HTML print styles with @media print is a powerful way to enhance the usability of your website for printed documents. By tailoring your styles for print, you ensure that your content looks professional and remains easy to read when it moves from screen to paper. Whether you run a blog, an online magazine, or any website, incorporating print styles is a best practice that benefits your users.

Feel free to experiment with different styles and adjustments to see what works best for your content. Happy coding!