snippetcssTip
CSS Print Stylesheet
Viewed 0 times
printstylesheetcss
Problem
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- The print media query is used to apply styles when the page is printed.@page:
-
size - Specify the page size.body:
Solution
@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;
}
}@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:
Code Snippets
@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;
}
}Context
From 30-seconds-of-code: print-stylesheet
Revisions (0)
No revisions yet.