Tutorial 44 of 44 in series

CSS Print

Style web pages for printing

Abhishek Sharma 2026-05-30 Web Development / Frontend / CSS

100%

Print Styles

CSS can create styles specifically for printed pages using the print media type.

Demo: Print Style Sheet (Simulated)

HTML

<div class="print-preview">
<header class="no-print">Header (hidden in print)</header>
<main>
<h1>Article Title</h1>
<p>This content appears in print.</p>
</main>
<aside class="no-print">Sidebar (hidden in print)</aside>
<footer>Footer (visible in print)</footer>
</div>

CSS

@media print {
.no-print { display: none; }
body { font-size: 12pt; color: black; background: white; }
a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
@page { margin: 2cm; }
}
.print-preview { font-family: Georgia, serif; max-width: 600px; }
header, footer, aside { padding: 10px; margin: 4px 0; border: 1px solid #cbd5e1; border-radius: 4px; }
header { background: #eef2ff; }
footer { background: #f1f5f9; }
aside { background: #fef9c3; }

Live Output Window

Common Print Techniques

@media print {
  /* Hide non-essential elements */
  nav, .sidebar, .advertisement { display: none; }

  /* Make links visible */
  a[href]::after {
    content: " (" attr(href) ")";
  }

  /* Page breaks */
  h2 { page-break-before: always; }

  /* Ensure backgrounds appear */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@page Rule

Control the printed page dimensions and margins:

@page {
  size: A4;
  margin: 2cm;
}

@page :first {
  margin-top: 4cm;
}

Print-Specific Properties

Property	What It Does
`page-break-before`	Break before an element (`always`, `avoid`)
`page-break-after`	Break after an element
`page-break-inside`	Avoid breaks inside an element
`orphans`	Min lines at bottom of page
`widows`	Min lines at top of page

Always test your print styles - what looks good on screen may not translate well to paper.

Keep learning

Related tutorials from across the library.

All tutorials

Tutorial2026-05-30

Introduction to CSS

Learn what CSS is and why it matters

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

History of CSS

Understand how CSS evolved

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

Adding CSS

Three ways to add CSS to a page

Web Development / Frontend / CSS

CSSWeb Development