HTML Web Development Blog Post | HTMLEditor.net

Despite living in a digital world, people still print web pages—resumes, articles, recipes, invoices, and more. When someone clicks “Print” on your website, you want them to get a clean, professional printout, not a mess of broken layouts, cut-off text, and wasted ink. In this guide, you’ll learn how to create print-friendly web pages that look great on paper.

With just a bit of CSS and some thoughtful HTML structure, you can ensure your content prints beautifully while maintaining a great screen experience.

Why Print Styles Matter

People print web pages for many reasons:

Saving articles for offline reading
Printing resumes and portfolios
Creating hard copies of receipts or invoices
Keeping recipe cards
Archiving important documents
Reading long content away from screens

A print-friendly page shows professionalism and consideration for your users’ needs.

The Print Media Query

CSS media queries let you apply specific styles only when printing:

/* Styles for screens */
body {
  background: #f5f5f5;
  color: #333;
}

/* Styles for printing */
@media print {
  body {
    background: white;
    color: black;
  }
}

Everything inside @media print { } only applies when the page is printed.

Essential Print Styles

Remove Unnecessary Elements

Hide navigation, sidebars, ads, and interactive elements that don’t make sense on paper:

@media print {
  /* Hide non-essential elements */
  nav,
  .sidebar,
  .advertisement,
  .social-share,
  .comments,
  footer,
  button,
  video {
    display: none !important;
  }
}

Use Black Text on White Background

Save ink and improve readability:

@media print {
  body {
    background: white;
    color: black;
  }
  
  /* Override any colored backgrounds */
  * {
    background: white !important;
    color: black !important;
  }
}

Expand Collapsed Content

Show content that might be hidden behind accordions or tabs:

@media print {
  .accordion-content,
  .tab-panel {
    display: block !important;
    height: auto !important;
  }
}

Display Link URLs

Print the actual URLs of links so readers know where they point:

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.875em;
    color: #666;
  }
  
  /* Don't show URLs for internal anchors */
  a[href^="#"]:after {
    content: "";
  }
}

Page Break Control

Control where pages break to avoid awkward splits:

@media print {
  /* Avoid breaking these elements */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  img, table, figure {
    page-break-inside: avoid;
  }
  
  /* Keep these elements together */
  .article-header,
  .code-block,
  .quote {
    page-break-inside: avoid;
  }
  
  /* Force page breaks before major sections */
  .chapter {
    page-break-before: always;
  }
}

Optimizing Images for Print

@media print {
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Remove decorative images */
  .decorative-image,
  .background-image {
    display: none;
  }
  
  /* Ensure important images print */
  .article-image,
  .diagram {
    display: block;
    margin: 1rem 0;
  }
}

Typography for Print

Use print-optimized typography:

@media print {
  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12pt;
    line-height: 1.5;
  }
  
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
  
  /* Add margins for binding */
  @page {
    margin: 2cm 1.5cm 2cm 2.5cm;
  }
}

Complete Print Stylesheet Example

Here’s a comprehensive print stylesheet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Print-Friendly Article</title>
  <style>
    /* Screen styles */
    body {
      font-family: system-ui, sans-serif;
      max-width: 800px;
      margin: 2rem auto;
      padding: 0 1rem;
      background: #f5f5f5;
    }
    
    nav {
      background: #333;
      color: white;
      padding: 1rem;
      margin-bottom: 2rem;
    }
    
    .sidebar {
      background: #e0e0e0;
      padding: 1rem;
      margin: 1rem 0;
    }
    
    .print-only {
      display: none;
    }
    
    /* Print styles */
    @media print {
      /* Reset */
      * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }
      
      /* Page setup */
      @page {
        margin: 2cm;
        size: A4;
      }
      
      body {
        font-family: Georgia, serif;
        font-size: 12pt;
        line-height: 1.5;
        max-width: 100%;
        margin: 0;
        padding: 0;
      }
      
      /* Hide non-essential elements */
      nav,
      .sidebar,
      .no-print,
      button,
      .social-share {
        display: none !important;
      }
      
      /* Show print-only content */
      .print-only {
        display: block !important;
      }
      
      /* Typography */
      h1 {
        font-size: 24pt;
        margin-top: 0;
        page-break-after: avoid;
      }
      
      h2 {
        font-size: 18pt;
        page-break-after: avoid;
        margin-top: 1.5em;
      }
      
      h3 {
        font-size: 14pt;
        page-break-after: avoid;
      }
      
      /* Links */
      a {
        text-decoration: underline;
      }
      
      a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.875em;
        font-style: italic;
      }
      
      a[href^="#"]:after,
      a[href^="javascript:"]:after {
        content: "";
      }
      
      /* Images */
      img {
        max-width: 100%;
        height: auto;
        page-break-inside: avoid;
      }
      
      /* Tables */
      table {
        border-collapse: collapse;
        width: 100%;
        page-break-inside: avoid;
      }
      
      th, td {
        border: 1pt solid black;
        padding: 0.5em;
        text-align: left;
      }
      
      th {
        background: #f0f0f0 !important;
        font-weight: bold;
      }
      
      /* Code blocks */
      pre, code {
        border: 1pt solid #ccc;
        page-break-inside: avoid;
        font-family: 'Courier New', monospace;
        font-size: 10pt;
      }
      
      /* Avoid orphans and widows */
      p {
        orphans: 3;
        widows: 3;
      }
      
      /* Header for every page */
      @page {
        @top-center {
          content: "Article Title";
        }
        @bottom-right {
          content: "Page " counter(page);
        }
      }
    }
  </style>
</head>
<body>
  <nav class="no-print">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
  
  <div class="print-only">
    <p>Printed from: https://example.com/article</p>
    <p>Date: <script>document.write(new Date().toLocaleDateString())</script></p>
  </div>
  
  <article>
    <h1>Article Title</h1>
    <p class="byline">By Author Name | Published: January 1, 2024</p>
    
    <p>Article content goes here...</p>
    
    <h2>Section Heading</h2>
    <p>More content...</p>
  </article>
  
  <aside class="sidebar no-print">
    <h3>Related Articles</h3>
    <ul>
      <li><a href="/article-1">Related Article 1</a></li>
      <li><a href="/article-2">Related Article 2</a></li>
    </ul>
  </aside>
</body>
</html>

Testing Your Print Styles

Browser Testing

Open your page in a browser
Press Ctrl+P (Windows) or Cmd+P (Mac)
Look at the print preview
Check for:
- Hidden elements removed
- Good page breaks
- Readable text size
- All important content visible

Chrome DevTools

Open DevTools (F12)
Open the rendering panel
Enable “Emulate CSS print media type”
See print styles without actually printing

Best Practices Checklist

Before deploying your print styles:

✅ Hide navigation, sidebars, and ads
✅ Use black text on white background
✅ Show link URLs for external links
✅ Control page breaks logically
✅ Optimize images for print
✅ Use print-friendly fonts (serif)
✅ Remove shadows and backgrounds
✅ Test in multiple browsers
✅ Check page margins
✅ Ensure important content isn’t hidden

Common Print Issues

Problem: Colors don’t print Solution: Use !important to force black text

Problem: Content is cut off Solution: Remove fixed widths and use percentage-based layouts

Problem: Broken page breaks Solution: Use page-break-inside: avoid on key elements

Problem: Images too large Solution: Set max-width: 100% on images

Keep Learning

HTML Best Practices - Avoid common errors
Semantic HTML - Structure your content
Responsive Design - Mobile-friendly pages
Explore Templates - See working examples

Test your print styles in the htmlEditor.net playground today!

Remember: A good print stylesheet respects your users’ time, ink, and paper. Make every printout count.

← Back to all blog posts