Intermediate LevelCSS & Modern Layouts
How do you create print-optimized stylesheets with @media print?
❓ Interview Prompt: Explain print media queries, page-break control, and hiding non-printable elements.
@media print targets styles applied only when printing the page:
Common Print Optimizations:
1
Hide navigation, sidebars, and interactive elements.
2
Remove backgrounds and shadows to save ink.
3
Expand collapsed content (accordions, tabs).
4
Set print-friendly fonts and colors (black text on white).
5
Control page breaks with
break-before, break-after, break-inside.Code Implementation Example
css
@media print {
/* Hide non-printable elements */
.navbar, .sidebar, .footer, .no-print { display: none; }
/* Save ink: remove backgrounds */
body { background: white; color: black; font-size: 12pt; }
/* Prevent page breaks inside elements */
.card, .table-row { break-inside: avoid; }
/* Start chapters on new pages */
h1 { break-before: page; }
/* Show link URLs after anchors */
a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}💡Print stylesheet hiding UI, saving ink, and controlling page breaks.
🎯 Interview Key Takeaway
Use @media print to hide interactive elements, remove decorative backgrounds, and control page break positioning.
#Print#Media#Accessibility#Intermediate
Back to all CSS & Modern Layouts Questions→