Write CSS for printing

A print stylesheet applies styles when a document is printed or shown in print preview. Put print rules in @media print, or link a separate stylesheet with media="print". Screen appearance alone does not verify the printed result.

Working example

<nav aria-label="Example sections"><a href="#notes">Read notes</a></nav>
<main>
  <h1>Project handout</h1>
  <section id="notes">
    <h2>Notes</h2>
    <p>Keep these instructions in the printed document.</p>
    <div class="note">
      <h3>Before you start</h3>
      <p>Read the whole task and gather the materials.</p>
    </div>
  </section>
</main>

body {
  max-width: 40rem;
  margin: auto;
  padding: 1rem;
}
nav {
  padding: 1rem;
  background: #dbeafe;
}
.note {
  border: 1px solid #64748b;
  padding: 1rem;
}
@media print {
  nav {
    display: none;
  }
  body {
    max-width: none;
    padding: 0;
    color: black;
    background: white;
  }
  .note {
    break-inside: avoid;
  }
  a {
    color: black;
    text-decoration: underline;
  }
}

Perform the inspection

Copy the complete document into a local HTML file, open it, then use the browser’s Print command. The navigation should disappear while the instructions remain. You can also emulate print media in developer tools, but that does not establish final page breaks.

break-inside: avoid requests that the note stay together. If a box cannot fit on a page, the browser must still paginate it. Paper size, margins, scale, browser headers and engine behavior affect the result.

Keep essential content

Do not hide important instructions merely to save ink. Do not rely on colored backgrounds being printed; readers may disable them. Review long tables, links and clipped overflow. The orphans and widows references cover minimum line-count requests at breaks. See the historical page-break reference for modern break-property alternatives.

Sources

Reference 1 provide the technical details and current compatibility information.