HTML & CSS Interview Question #137

What is print CSS?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Print CSS provides styles specifically for printed output, normally through @media print or a stylesheet with print media. It can remove navigation and interactive controls, adjust typography, avoid unsuitable colors, and improve page-break behavior.

Detailed Explanation

Print requirements differ from screen requirements. Important URLs, headings, tables, and document content may need special handling so the printed result remains understandable without the interactive interface.

Code Example

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

    body {
        color: black;
        background: white;
    }

    article {
        max-width: none;
    }
}