Как сделать стили для печати

Короткий ответ

Правила внутри @media print действуют только при печати. Спрячьте всё, что на бумаге не нужно:

<style>
  @media print {
    nav, .no-print { display: none; }
    body { color: black; background: white; }
  }
</style>
 
<nav>Menu: Home · Blog</nav>
<h2>Pancake recipe</h2>
<p>Mix flour, eggs and milk.</p>
<button class="no-print" onclick="print()">Print</button>

Нажмите «Print» и посмотрите предпросмотр: меню и кнопки в нём нет.

Адреса ссылок

На бумаге по ссылке не щёлкнешь. Выведите её адрес после текста:

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

Разрывы страниц

Свойство break-before: page начинает элемент с новой страницы, а break-inside: avoid не даёт разрезать блок — картинку с подписью или строку таблицы — между двумя листами:

@media print {
  h2 { break-before: page; }
  figure, tr { break-inside: avoid; }
}

Частая ошибка

Сайт с тёмной темой или цветным фоном печатают как есть. Большинство браузеров по умолчанию не печатают фоны, и светлый текст остаётся на белой бумаге почти невидимым. Задайте для печати тёмный цвет текста явно, как в первом примере.