CSS Media Types

CSS media types allow you to format your documents to be presented correctly on various types of media such as screen, print, an aural browser, etc.

Introduction to Media Types

One of the most important features of style sheets is that, you can specify separate style sheets for different media types. This is one of the best ways to build printer friendly Web pages — Just assign a different style sheet for the "print" media type.

Some CSS properties are only designed for certain media. For example, the page-break-after property only applies to paged media. However there are several properties that may be shared by different media types, but may require different values for that property. The font-size property for example can be used for both screen and print media, but possibly with different values.

A document usually needs a larger font on a computer screen as compared to the paper for better readability, also sans-serif fonts are considered easier to read on the screen, while serif fonts are popular for printing. Therefore it is necessary to specify that a style sheet, or a set of style rules, applies to certain media types.

Creating Media Dependent Style Sheets

Three methods are commonly used to specify the media dependencies for style sheets:

Method 1: Using the @media At-rules

The @media rule is used to define different style rules for different media types in a single style sheet. It is usually followed by a comma-separated list of media types and the CSS declarations block containing the styles rules for target media.

The style declaration in the example below tells the browser to display body content in 14 pixels Arial font on the screen, but in case of printing it will be in a 12 points Times font. However the value of line-height property is set to 1.2 for both of them:

@media screen{
    body {
        color: #32cd32;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
}
@media print {
    body {
        color: #ff6347;
        font-family: Times, serif;
        font-size: 12pt;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}

Method 2: Using the @import At-rules

The @import rule is another way of setting style information for a specific target media — Just specify the comma-separated media types after the URL of the imported style sheets.

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
    background: #f5f5f5;
    line-height: 1.2;
}

The print media type in the @import statement instructs the browser to load an external style sheet (print.css) and use its styles only for print media.

Method 3: Using the <link> element

The media attribute on the <link> element is used to specify the target media for an external style sheet within the HTML document.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

In this example the media attribute instructs the browser to load an external style sheet "screen.css" and use its styles only for screen while "print.css" for printing purpose.

Different Media Types

The following table lists the various media types that may used to target different types of devices such as printers, handheld devices, computer screens etc.

Media Type