CSS Tricks: @media
Using the same content on a website and on a printed document is a very common requirement. Even when the two versions share most of the style, it’s often useful to define some specific details for one of the supports using media types.
html {
background: #ddd;
}
@media print {
html {
background: transparent;
}
}
This example shows that a page with a light grey background. If this background is nice when displayed on a browser, where designers sometimes try to avoid pure black and white, it would require a lot of useless ink on paper for a bad result. Let’s set a transparent background, only for the printed document!
The media types give the possibility to use a single stylesheet, with rule mixed for different supports. But they also give nice syntaxes to split the stylesheets into different files, either using HTML:
<link href="print.css" rel="stylesheet" media="print">
Or CSS:
@import "print.css" print;
Learn more about media types: