Why Print Styles Matter

Users still print web pages — receipts, documentation, tickets, articles, and reports. Without print CSS, pages waste ink on navigation, ads, and dark backgrounds. Professional sites include @media print rules for readable, efficient printed output.

The Print Media Query 

  @media print {
    /* Print-specific rules */
}

Also valid: @media print and (min-width: 8.5in) for size-specific rules.

Hide Non-Essential UI 

  @media print {
    nav,
    .sidebar,
    .ad-banner,
    .cookie-banner,
    footer .social-links,
    button,
    .no-print {
        display: none !important;
    }
}

Use a .no-print utility class in HTML for elements that should never print:

  <button class="no-print">Share</button>

Optimize Typography for Paper 

  @media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    h1 { font-size: 18pt; }
    h2 { font-size: 14pt; page-break-after: avoid; }

    a {
        color: #000;
        text-decoration: underline;
    }

    /* Show URLs after links */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        font-weight: normal;
    }

    /* Don't show URLs for internal/anchor links */
    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }
}

Use pt (points) for print — absolute units that map to physical paper.

Page Break Control 

  @media print {
    h1, h2, h3 {
        page-break-after: avoid;
        break-after: avoid;
    }

    p, li, blockquote {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .chapter {
        page-break-before: always;
        break-before: page;
    }

    table, figure, pre {
        page-break-inside: avoid;
    }
}

Modern property: break-* (replaces legacy page-break-*).

Page Size and Margins 

  @page {
    size: A4;
    margin: 2cm;
}

@page :first {
    margin-top: 3cm; /* extra top margin on first page */
}

@page :left {
    margin-left: 3cm;
    margin-right: 2cm;
}

@page :right {
    margin-left: 2cm;
    margin-right: 3cm;
}

Supported in most browsers for print preview; test in Chrome and Firefox print dialogs.

  @media print {
    .container {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
    }

    /* Expand collapsed sections */
    details { display: block; }
    details[open] summary ~ * { display: block; }

    /* Full-width tables */
    table { width: 100%; border-collapse: collapse; }
    th, td { border: 1px solid #ccc; padding: 4pt 8pt; }
}

Color and Images 

  @media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Optional: remove backgrounds to save ink */
    .save-ink {
        background: none !important;
        box-shadow: none !important;
    }
}

print-color-adjust: exact preserves brand colors and chart colors when users enable “Background graphics.”

Headers and Footers (Browser-Dependent)

Some browsers support running elements (limited support):

  @page {
    @top-center {
        content: "GazeHub Documentation";
    }
    @bottom-right {
        content: "Page " counter(page);
    }
}

For reliable page numbers, consider server-side PDF generation (Puppeteer, Prince XML).

  /* screen.css — default styles */

/* print.css — loaded with media attribute */
<link rel="stylesheet" href="print.css" media="print">

Or keep print rules at the bottom of main stylesheet in @media print block.

Testing Print Output

  1. Chrome DevTools → Rendering → Emulate CSS media type: print
  2. Print Preview (Cmd/Ctrl + P) — check page breaks and margins
  3. Print to PDF and review multi-page documents
  4. Test with “Background graphics” on and off

Best Practices

  1. Always include print styles for documentation and article sites
  2. Expand URL hrefs for external links
  3. Avoid page breaks inside headings, tables, and figures
  4. Black text on white unless color is essential (charts)
  5. Test multi-page content — long tables and code blocks

Troubleshooting

Background colors missing in print

  • Add print-color-adjust: exact; user must enable background graphics

Content cut off at page breaks

  • Apply break-inside: avoid to affected elements

Sidebar still printing

  • Verify display: none specificity; use !important in print block if needed

Print styles are often overlooked — add them for professional, ink-efficient printed output.