CSS Print Stylesheet Generator

Generate @media print CSS to control how pages look when printed. Hide elements, set margins, fonts.

Hide Elements

Hide navigation (nav)

Hide header

Hide footer

Hide sidebar (aside)

Hide images

Hide videos / embeds

Hide ads

Link Options

Show URLs after links

Page Setup

Page Size

Orientation

Page Margin

Font Family

Font Size

CSS Output

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

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

  body {
    font-family: serif;
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  /* Hide navigation */
  nav, header nav { display: none !important; }

  /* Hide sidebar */
  aside, .sidebar, [role="complementary"] { display: none !important; }

  /* Hide videos */
  video, iframe[src*="youtube"], iframe[src*="vimeo"] { display: none !important; }

  /* Hide ads */
  .ad, .ads, .advertisement, [id*="ad-"], [class*="ad-"] { display: none !important; }

  /* Show URLs after links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  /* Prevent page breaks inside key elements */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  pre, blockquote, table {
    page-break-inside: avoid;
  }

}

CSS Print Stylesheet Generator

Generate a complete @media print CSS block to control how your web pages look when printed. Toggle options to hide navigation, sidebars, ads, videos, and other non-essential elements. Configure page size, orientation, margins, and typography. The option to show URLs after links ensures printed pages remain useful even without internet access.

Private & free — this tool runs entirely in your browser.