Using the @media rule in your CSS allows you to target different media types, and screen sizes, from a single stylesheet. Using media queries is integral to the current push towards responsive design. They can also be used to create your print styles using @media print. You may have noticed this starting to appear on some modern frameworks and base templates. You can add this to your stylesheet. Note that specificity and precedence rules still apply:

@media print { 
 /* All your print styles go here. This is an example: */
 #header, #footer, #nav { display: none !important; } 
}

In your print styles, you may want to hide certain elements that should not be printed, such as a header or a footer nav. Or to adjust layout, padding, and margins to provide a better looking printed document.

Browser Support for “@media print”

A separate printable stylesheet is still the way to go if you want to support Internet Explorer 8 and below. If you really don’t want that extra HTTP request, you could always use both the media query and an IE conditional comment to include the print.css. The @media print is supported in the following browsers:

• FireFox 3.5
• Internet Explorer 9
• Chrome 14
• Safari 3.2
• Opera 11

The Old Ways: Using a Separate Print Stylesheet

Before the print media query was supported in web browsers, print styles were included as a separate stylesheet with the media attribute that designated it as “print”. For reference, here is the old tried-and-true way:

<link href="/print.css" rel="stylesheet" media="print" type="text/css" />

And if you only wanted to send it to IE 8 and below:

<!--[if lte IE 8]>
<link rel="stylesheet" media="print" href="/print.css" type="text/css" />
<![endif]-->