This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Restricting styles by media

Media attribute

Media specific linked style sheets allow you to create different styles for any number of different media. The basic mechanism to restict stylesheets by media is the media attribute, which can accept one value or a comma-separated list of values.

Examples:

<link rel="stylesheet" href="one.css" type="text/css" media="screen">
<link rel="stylesheet" href="two.css" type="text/css" media="print, projection">

This can be used for both link and style elements. Inline styles (using the style attribute) are applied to all media and cannot be restricted.

Imported stylesheets can be restricted to one or more media. CSS2 allows conditional importing of style sheets based on the current medium. This means that a style sheet will only be imported when a page is being displayed in a particular medium.

To conditionally import a style sheet based on the current medium, create a standard @import rule, but add the names of the media that will cause the style sheet to be imported directly after the rule in a comma separated list.

For example the following statement could be used for screen and projection media types:

<STYLE TYPE="text/css" media="screen, projection">
<!--
@import url(classic.css);
@import url(modern.css);
DT { background: yellow; color: black; }
-->
</STYLE>

Note that other CSS rules may still be included in the STYLE element, but that all @import statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained DT {background: aqua}, definition terms would still have a yellow background.

If you only specify one media type, the external sheet will only be loaded if the document is being rendered for that one media type. For example, to include a sheet only if it is to be rendered by handheld devices, you could say:

@import url(palm-styles.css) handheld;

This is particularly useful for low bandwidth media, like handhelds. With an imported style sheet based on the medium, only the statements specific to the particular medium need to be downloaded.

In general, this method of media type control could be useful for defining a large set of rules for a specific media type. If you need only tweak one or two rules for a media type, the @media rule is probably more useful.

In the absence of any media types, the import is unconditional. Specifying 'all' for the media has the same effect.

To declare the @import statement with two or more media specified use the @import statement with the multiple media in a comma-separated list after the URI.

Example for two media:

@import url("proj_tv.css") projection, tv;

Example for three media:

@import url("projection_tv_print.css") projection, tv, print;

These types of rules have the same effect as if the imported style sheet were wrapped in an @media rule for the same media, but it may saves user agent a fruitless download. If no media type is specified, the import is unconditional. Specifying 'all' for the medium is also unconditional.

The easiest way to "turn off" an element in a display medium is to set it to display: none. The simplest approach would look something like this:

<style type="text/css" media="print">
div#sidebar {display: none;}
</style>
<div id="sidebar">...</div>

In this example, the div will appear in any medium except print, because the print stylesheet turns it off when the page is output in print.