Media style sheets are simply CSS style sheets: They can be either internal or external. However, when you want a web browser to apply the styles for only a particular device such as a screen or printer, you need to add the style sheet to your web page in a slightly different way than usual.
To attach an external style sheet while specifying a particular media type, use the <link> tag with a media attribute. To link a style sheet that should be used only for printing, add this HTML to your web page:
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
Technically, the rules of CSS also let you define a media type when using the @import method of attaching an external style sheet (see Tutorial: Creating Your First Styles), like so: @import url(print.css) print;. But since Internet Explorer refuses to understand this code, you should avoid using it.
If you don't specify any media, a web browser assumes you're targeting all media, so it uses the style sheet for screen display, printing, and so on. In addition, you can specify multiple media types by separating them with commas. A linked external style sheet targeting multiple media might look like:
<link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="screen.css"/>
You probably won't need to specify more than one until browsers start recognizing multiple media types.
When you build and test printer style sheets, leave off the media="print" attribute and turn off any screen-only style sheets. For example, change media="screen" to media="speech". This technique lets you view the page in a web browser but have it display as if it were formatted for a printer. Once the printer style sheet looks good, make sure to set its media type to print and turn on any screen-only style sheets.
You can also include media-specific styles directly inside a style sheet using the @media directive. Maybe you want to add a couple of print-specific styles to an internal style sheet. Or perhaps you'd like to keep all your styles in a single external style sheet and just add a few printer-only styles. You can do so using the @media directive, like so:
@media print {
/* put your styles for the printer in here */
}Be careful to include that closing brace (on the last line), otherwise the directive won't work. Here's an example of using @media to include two printer-only styles:
@media print {
h1 {
font-size: 24pt;
}
p {
font-size: 12pt;
}
}Technically, it doesn't really matter whether you put all styles in a single file and use the @media method or put media-specific styles in their own external style sheets (like screen.css, and printer.css). Putting all your printer-only styles in their own external style sheet named something like printer.css makes it a lot easier to find and edit styles for print only.