Authentic people growing open source code with taste

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!

Website view with light grey background
Website view with a light grey background
Print view with transparent background
Print view with a transparent background

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">


@import "print.css" print;

Learn more about media types: