Print Stylesheet Guide
Basic Structure
/* Option 1: In your stylesheet */
@media print {
/* print-specific rules */
}
/* Option 2: Separate file */
<link rel="stylesheet" href="print.css" media="print">
Hide / Show Elements
@media print {
/* Hide elements not useful when printed */
nav, header, footer, .sidebar, .ads, .cookie-banner,
button, .no-print, video, audio, [aria-hidden="true"] {
display: none !important;
}
/* Show print-only content */
.print-only {
display: block !important;
}
}
Show URLs After Links
@media print {
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #666;
}
/* Don't show for internal/js links */
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
}
Page Breaks
@media print {
/* Avoid breaking inside elements */
h1, h2, h3, h4, blockquote, pre, figure {
break-inside: avoid;
page-break-inside: avoid; /* legacy */
}
/* Force break before each article */
article {
break-before: page;
page-break-before: always; /* legacy */
}
/* Avoid orphan headings */
h1, h2, h3 {
break-after: avoid;
}
}
Typography & Colors
@media print {
body {
font-size: 12pt;
line-height: 1.5;
color: #000;
background: #fff;
}
h1 { font-size: 24pt; }
h2 { font-size: 18pt; }
/* Ensure background images/colors print */
.hero-section {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Page Size & Margins
@page {
size: A4 portrait; /* A4, letter, landscape */
margin: 2cm 2.5cm; /* top/bottom left/right */
}
/* Different margins for first page */
@page :first {
margin-top: 3cm;
}
/* Left / Right pages (for double-sided) */
@page :left { margin-left: 3cm; }
@page :right { margin-right: 3cm; }