The first thing every print stylesheet does is hide the parts of the page that only make sense on screen: navigation, ads, banners, share buttons. Use display: none !important because authors of those components often have specificity high enough to win without the bang. The second job is contrast: many printers are monochrome, and dark mode pages look terrible printed, so force white background and black text. The link-expansion trick (a[href]::after { content: " (" attr(href) ")"; }) prints the URL right after the link text, so the printed copy is still useful as a reference; exclude in-page anchors and javascript: links so you do not get noise. page-break-inside: avoid keeps figures from being cut in half across pages.

The @page rule controls the paper itself: paper size (A4, Letter), orientation (portrait, landscape), and the margins around the printable area. @page :first lets the title page have different margins than subsequent pages. Inside @media print, use break-before: page to force each chapter onto its own page and break-after: avoid on headings so a heading is never the last line on a page. By default, browsers strip background colors and images on print to conserve ink; if your design depends on a colored callout or a printed logo, opt back in with print-color-adjust: exact (and the -webkit- prefix for Safari/Chromium). The nested @page margin boxes (@top-center, @bottom-right) are CSS Paged Media level 3 and let you place running headers and page numbers; support is good in Chromium and Firefox, partial in Safari.