Skip to content

Print Styles — Complete Guide

DodaTech Updated 2026-06-28 7 min read

In this tutorial, you will learn about Print Styles. We cover key concepts, practical examples, and best practices to help you master this topic.

Print stylesheets optimize web pages for printed output by removing navigation, adjusting colors, showing URLs, setting page breaks, and improving ink usage.

What You'll Learn

  • Media query for print styles
  • Removing non-printable elements
  • Color and background adjustments
  • URL display for links
  • Page break management
  • Table and code print formatting
  • Respecting print-specific CSS properties

Why It Matters

  • Users print recipes, articles, tickets, and invoices
  • A good print style improves user satisfaction
  • Default print output wastes ink and paper
  • Print styles are an overlooked responsive dimension

Real-World Use

  • A recipe site removes ads and images for print
  • An invoice page shows clean black-and-white output
  • An article site expands text and collapses navigation
  • A travel site shows confirmation details without styling
flowchart LR
  A[Print Stylesheet] --> B[Hide Non-Essential]
  A --> C[Adjust Colors]
  A --> D[Show Link URLs]
  A --> E[Set Page Breaks]
  B --> F[Nav, Sidebar, Ads]
  C --> G[Black text, white bg]
  D --> H[a[href]::after]
  E --> I[page-break-before/after]

Code Example: Complete Print Stylesheet

/* Print styles - typically in a separate file or media block */
@media print {
    /* Reset */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Hide non-printable elements */
    nav,
    .nav,
    .sidebar,
    .footer,
    .header,
    .ads,
    .advertisement,
    .social-sharing,
    .comments,
    .related-posts,
    .newsletter-signup,
    .cookie-banner,
    .mobile-nav-toggle,
    .offcanvas-nav,
    .overlay,
    button,
    .button,
    [role="button"],
    .cta-banner,
    .popup,
    .modal,
    .video-player,
    .carousel,
    .slider {
        display: none !important;
    }

    /* Page setup */
    @page {
        margin: 2cm;
        size: auto;
    }

    /* Body adjustments */
    body {
        font-size: 12pt;
        line-height: 1.5;
        font-family: Georgia, 'Times New Roman', serif;
        max-width: none;
        padding: 0;
        margin: 0;
    }

    /* Main content */
    main,
    article,
    .content,
    .post-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        float: none;
    }

    /* Links */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
        color: #555 !important;
    }

    /* Don't show URL for internal or named anchors */
    a[href^="#"]::after,
    a[href^="/"]::after {
        content: none;
    }

    /* Images */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Headings */
    h1, h2, h3, h4 {
        page-break-after: avoid;
        orphans: 3;
        widows: 3;
    }

    h1 {
        font-size: 18pt;
    }

    h2 {
        font-size: 16pt;
        border-bottom: 1pt solid #000;
        padding-bottom: 3pt;
    }

    h3 {
        font-size: 14pt;
    }

    /* Paragraphs */
    p {
        orphans: 3;
        widows: 3;
        font-size: 12pt;
    }

    /* Tables */
    table {
        border-collapse: collapse;
        width: 100%;
        page-break-inside: avoid;
    }

    th, td {
        border: 1pt solid #000;
        padding: 4pt 8pt;
    }

    th {
        background: #eee !important;
        font-weight: bold;
    }

    /* Code blocks */
    pre, code {
        font-family: 'Courier New', monospace;
        font-size: 10pt;
        white-space: pre-wrap;
        word-wrap: break-word;
        border: 1pt solid #ccc;
        padding: 8pt;
    }

    /* Lists */
    ul, ol {
        margin-left: 20pt;
    }

    /* Page breaks */
    .page-break {
        page-break-before: always;
    }

    .avoid-break {
        page-break-inside: avoid;
    }

    /* Form elements */
    input, textarea, select {
        border: 1pt solid #000 !important;
        padding: 4pt;
    }

    /* Abbreviations */
    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    /* QR codes and barcodes */
    img[src*="qrcode"],
    img[src*="barcode"] {
        display: block;
        margin: 1cm auto;
        max-width: 5cm;
    }

    /* Watermark or print-only content */
    .print-only {
        display: block !important;
    }

    .screen-only {
        display: none !important;
    }
}

Expected output: When the user prints (Ctrl+P), the page renders without navigation, sidebar, ads, or interactive elements. Links show their full URLs in parentheses. Text is black on white with serif fonts for readability. Tables have visible borders. Page breaks are managed to avoid breaking headings from their content.

Code Example: Print-Friendly Article Layout

<article class="print-article">
    <header>
        <h1>Article Title That Prints Well</h1>
        <p class="byline">By Author Name</p>
        <p class="meta">Published: June 28, 2026</p>
    </header>

    <div class="print-notice screen-only">
        <p>This article is available in print format. Press Ctrl+P or use the print button below.</p>
        <button onclick="window.print()" aria-label="Print this article">Print Article</button>
    </div>

    <div class="article-body">
        <p>Article content goes here. Lorem ipsum dolor sit amet...</p>

        <figure>
            <img src="chart.png" alt="Data chart showing trends">
            <figcaption>Figure 1: Quarterly data trends</figcaption>
        </figure>

        <p>More content with a reference: <a href="https://example.com/research">View full research paper</a>.</p>
    </div>

    <footer class="print-footer print-only">
        <p>Printed from example.com on June 28, 2026</p>
        <p>&copy; 2026 Example Company. All rights reserved.</p>
    </footer>
</article>

<style>
/* Screen-only elements */
.print-only {
    display: none;
}

@media print {
    .screen-only {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    figure {
        page-break-inside: avoid;
        margin: 1cm 0;
    }

    figcaption {
        font-style: italic;
        font-size: 10pt;
    }

    .byline, .meta {
        font-size: 10pt;
        color: #333 !important;
    }
}
</style>

Expected output: On screen, the article shows a print button and normal styling. When printing, the button disappears, URLs appear after links, a footer with print metadata appears, and the article content uses serif fonts at a readable point size.

Code Example: Print-Ready Invoice

<div class="invoice">
    <div class="invoice-header">
        <h1>Invoice #INV-2026-0042</h1>
        <div class="invoice-meta">
            <p>Date: June 28, 2026</p>
            <p>Due: July 28, 2026</p>
            <p>Customer: Jane Doe</p>
        </div>
    </div>

    <table class="invoice-table">
        <thead>
            <tr>
                <th>Description</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Web Design Service</td>
                <td>10</td>
                <td>$150.00</td>
                <td>$1,500.00</td>
            </tr>
            <tr>
                <td>Hosting (Annual)</td>
                <td>1</td>
                <td>$360.00</td>
                <td>$360.00</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Subtotal</td>
                <td>$1,860.00</td>
            </tr>
            <tr>
                <td colspan="3">Tax (8%)</td>
                <td>$148.80</td>
            </tr>
            <tr>
                <td colspan="3"><strong>Total</strong></td>
                <td><strong>$2,008.80</strong></td>
            </tr>
        </tfoot>
    </table>

    <div class="invoice-footer print-only">
        <p>Thank you for your business.</p>
        <p>Payment due within 30 days.</p>
    </div>
</div>

Expected output: The invoice prints with clear black-and-white formatting, visible table borders, correct alignment of currency values, and footer text that only appears in print. No interactive elements or navigation clutter the print output.

Common Mistakes

  1. Not using @media print — Styles intended only for print should be inside a print media query to avoid affecting screen display.
  2. Forgetting to show link URLs — Printed pages lose hyperlink functionality. Show destination URLs with a[href^="http"]::after { content: " (" attr(href) ")"; }.
  3. Hiding everything with display: none — Only hide non-essential elements. Content, author info, and dates should remain visible.
  4. Not adjusting font sizes — Screen fonts measured in px or rem are often too small for print. Use pt for print typography (12pt body text).
  5. Ignoring page breaks — A heading at the bottom of a page with its content on the next page looks unprofessional. Use page-break-after: avoid and page-break-inside: avoid.
  6. Keeping dark mode colors — Dark mode designs with white text on black backgrounds waste enormous ink. Always set black text on white background for print.
  7. Not testing print output — Different browsers render print differently. Test in Chrome, Firefox, and Safari.

Practice Questions

  1. What media query targets print styles? @media print { ... }
  2. How do you show the destination URL after a link in print? a[href^="http"]::after { content: " (" attr(href) ")"; }
  3. What CSS property prevents a heading from being separated from its paragraph? page-break-after: avoid on the heading.
  4. Why should print styles use pt units instead of px? Points (pt) are physical units designed for print. 12pt is the standard readable size for printed text.

FAQ

{{< faq "Should I use a separate CSS file for print?" "You can use a separate file with media="print" or include styles in a @media print block in your main CSS. Separate files are easier to maintain for large projects." >}}

Do I need print styles for every page?

Focus on pages users are likely to print: articles, recipes, invoices, tickets, itineraries, and confirmation pages.

How do I handle JavaScript-generated content in print?

JavaScript does not run during print. Ensure all printed content is in the HTML. Use print-only hidden elements for static content.

Mini Project

Build a print-optimized article page with a print button. The page includes: article text with headings and images, navigation, sidebar with related posts, social sharing buttons, comments section, and a newsletter signup. Implement a complete print stylesheet that: removes all non-content elements, shows link URLs, sets appropriate page breaks, converts to black-and-white, uses serif fonts at 12pt, and adds a print footer with URL and print date. Add a screen-only print notice that disappears when printing. Test the print output in at least 2 browsers.

What's Next

Continue with Lesson 27: Responsive Animations to learn animations that work well on all devices.

← Previous Responsive Accessibility — Complete Guide Next → Responsive Animations — Complete Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Responsive Design