Skip to content

Latest commit

 

History

History
89 lines (76 loc) · 2.13 KB

print-stylesheet.md

File metadata and controls

89 lines (76 loc) · 2.13 KB
Raw
title type language tags cover excerpt dateModified
CSS Print Stylesheet
story
css
visual
cozy-desk-setup
A short opinionated print stylesheet to make your websites look great on paper.
2023-06-11

While it's not that often we physically print content from the web, print stylesheets shouldn't be overlooked. They can be used to make sure that the content of your website is presented in a legible and print-friendly manner. Here's a simple, opinionated print stylesheet that you can use as a base for your own:

@media print {
  @page {
    size: A4;
  }

  body {
    margin: 0;
    padding: 0;
  }

  body, p, h1, h2, h3, h4, h5, h6, li {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12pt;
    font-weight: normal;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  h1 {
    font-size: 24pt;
  }

  h2 {
    font-size: 18pt;
  }

  h3 {
    font-size: 14pt;
  }

  a:any-link {
    color: #0000FF;
    text-decoration: none;
  }

  a:any-link::after {
    content: " [" attr(href) "] ";
  }

  img {
    width: 100%;
  }

  header, footer, nav, aside, form, iframe, script {
    display: none;
  }
}
  • @media print - The print media query is used to apply styles when the page is printed.
  • @page:
    • size - Specify the page size.
  • body:
    • margin - Remove the default margin.
    • padding - Remove the default padding.
  • body, p, h1, h2, h3, h4, h5, h6, li:
    • font-family - Use print-friendly fonts.
    • font-size - Use a legible font size.
    • font-weight - Reset the font weight.
  • h1, h2, h3, h4, h5, h6:
    • font-weight - Make headings bold.
    • margin-bottom - Add some space between headings and the content below them.
  • h1-h3:
    • font-size - Use a larger font size for headings.
  • a:any-link:
    • color - Use a print-friendly color for links.
    • text-decoration - Remove the underline from links.
  • a:any-link::after:
    • content - Add the link URL after the link.
  • img:
    • width - Make images fill the page width.
  • header, footer, nav, aside, form, iframe, script:
    • display - Remove unnecessary elements from the page.