Print Stylesheets

Print CSS

Use @media print to hide navigation, ads, and interactive elements and format text for paper output.

Example

@media print {
  nav, footer, .ads, .no-print { display: none !important; }
  body { font: 12pt Georgia, serif; color: #000; }
  a::after { content: " (" attr(href) ")"; }
  h2 { page-break-before: always; }
  img { max-width: 100%; }
}

CSS

Full Editor

Pro Tip

Test print styles with Chrome DevTools > More Tools > Rendering > Emulate CSS media type.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned