CSS: The Missing Manual

How to Add Media Style Sheets

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 only for 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.

Specifying the Media Type for an External Style Sheet

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

Note

Technically, the rules of CSS also let you define a media type when using the @import method of attaching an external style sheet (see Section 2.4.2), 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.

Tip

When you build and test printer style sheets, leave ...