Styling for paper in CSS

A print stylesheet is mostly deletion, plus the URLs that a link loses on paper.

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

  body { color: black; background: white; font-size: 11pt; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
  }

  figure, tr, .card { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

@page {
  size: a4 portrait;
  margin: 18mm;
}

How it works

@page sets the sheet size and its margins.
break-inside: avoid keeps a figure or a row off two pages.
Printing the href after a link is the one thing paper needs and screens do not.

Keywords and builtins used here

attr
background
card
color
content
display
em
media
page
pt
sidebar

The run, in numbers

Lines: 18
Characters to type: 323
Tokens: 95
Three-star pace: 90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 63 seconds.

Type this snippet

Step 1 of 3 in Other media, step 10 of 13 in Styling components.

← Previous Next →