Writing Print Stylesheets with CSS

Print stylesheets are an easily forgotten part of CSS, but for content people actually print — invoices, articles, receipts — a dedicated @media print block makes a real difference.

@media print {
    nav, footer, .sidebar, .no-print, button {
        display: none;
    }

    body {
        color: black;
        background: white;
        font-size: 12pt;
    }

    a::after {
        content: " (" attr(href) ")"; /* show URLs since links aren't clickable on paper */
    }

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

    table { break-inside: avoid; } /* don't split a table across pages */
}

Test print styles with the browser’s actual print preview, not just by eyeballing the CSS — things like background colors being stripped by default (unless the user enables “print backgrounds”) and unexpected page breaks only show up there.