Detailed explanation
A print-friendly webpage preserves useful content while removing interface elements that do not help on paper or in a PDF. Use an @media print block so these rules apply during printing and print preview without changing the screen layout. Hide navigation, advertisements, action buttons, and other non-essential controls with display: none. Keep meaningful headings, tables, and document metadata; do not automatically hide every footer, because some contain important contact details or legal information.
For example: @media print { nav, .ads, .no-print { display: none; } body { color: #000; background: #fff; } .card { break-inside: avoid; } .chapter { break-before: page; } }. Print styles participate in the normal CSS cascade, so place them after relevant screen rules or use suitable specificity. Reset layouts that depend on a viewport: fixed heights, scrolling containers, and wide multi-column arrangements can clip content or create awkward pagination. Where necessary, use height: auto, overflow: visible, and a simpler block layout. Review fixed or sticky headers, since they may overlap or repeat unexpectedly in printed output.
Printing fragments content into pages rather than one continuous viewport. Use break-before and break-after to request page boundaries, and break-inside: avoid to discourage splitting cards, figures, or table rows. These are constraints rather than absolute guarantees: an element taller than a printable page cannot remain intact. The widows and orphans properties can help prevent isolated paragraph lines, subject to browser support. Define page margins with @page { margin: 15mm; }; the size descriptor can request a paper format, but browser and user settings affect the final output.
Prefer dark text on a light background, readable font sizes, and images that fit the printable width. Background graphics may be disabled by the user, so never rely on background colours alone to communicate meaning. Consider exposing important link destinations using a[href]::after and attr(href), with exclusions for fragment links or unsuitable URLs. Interviewers value both the CSS techniques and validation: inspect print preview across target browsers and paper sizes, checking clipping, blank pages, broken tables, and missing information.
Key points to remember
- Use @media print to override screen styles through the normal cascade.
- Hide non-essential UI while preserving meaningful document content.
- Use readable text, light backgrounds, and layouts without clipped scrolling containers.
- Control pagination with break-before, break-after, and break-inside.
- Set page margins with @page and verify the result in print preview.
Common mistakes candidates make
- Assuming screen layouts, fixed heights, and overflow containers will print correctly unchanged.
- Treating break-inside: avoid as a guarantee even when content exceeds one page.
- Relying on background colours or browser-specific print behaviour without testing.
Likely follow-up questions
What is the difference between @media print and @page?
@media print applies CSS rules specifically to printed output, including element visibility and layout. @page controls aspects of the page box, such as margins and requested size; support and print settings can affect the result.
How can you stop a table from splitting awkwardly?
Apply break-inside: avoid to rows where supported rather than trying to keep a long table on one page. Use semantic thead markup so browsers can repeat column headings, and test because pagination behaviour varies.
Can CSS force browsers to print background colours?
You can request colour fidelity with print-color-adjust: exact, but it does not guarantee that backgrounds will print. User preferences and browser settings can take precedence, so essential information must remain understandable without backgrounds.
Interview tip: Start with @media print, show a small example, then explain pagination constraints and how you validate the printed output.