CSS Media Types

CSS media types let you format your documents to be presented correctly on different media types like screen, print, aural browser, etc.

Introduction to Media Types

An important feature of style sheets is that it allows you to specify separate style sheets for different media types. Therefore, it is amongst the best ways to build printer-friendly Web pages by simply assigning a distinct style sheet for the "print" media type.

A few CSS properties are designed only for certain media. For example, the page-break-after property applies only to paged media. However, there are several properties that different media types may share but may require different values for that property. For example, you can use the font-size property for both screen and print media, but with different values. 

Usually, larger fonts are required for a document on a computer screen in comparison to the paper for better readability. Moreover, sans-serif fonts are considered easier to read on the screen, while serif fonts are famous for printing. Therefore, it is imperative to specify that a style sheet or a set of style rules is applicable to certain media types.

Creating Media Dependent Style Sheets

The media dependencies for style sheets are specified by using the below-mentioned three most commonly used methods: 

Method 1: Using the @media At-rules

Different style rules for different media types can be defined using the @media rule in a single style sheet. It is typically followed by a comma-separated list of media types and the CSS declarations block containing target media style rules. 

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

Example :

@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;
    }
}

Try With Example

Note: Style rules that are outside of @media rules are applicable to all media types that the style sheet applies to. Moreover, At-rules inside @media are invalid in CSS2.1.

Method 2: Using the @import At-rules

The @import rule is the second method of setting style information for a specific target media. Simply specify the comma-separated media types after the imported style sheets URL.

Example :

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

Try With Example

In the @import statement, the print media type gives instructions to the browser for loading an external style sheet (print.css) and using its styles only for print media.

Note: Each @import statement must occur before any declarations at the beginning of a style sheet. Any style rule that has been specified in the style sheet itself will override the conflicting style rules set in the imported style sheets.

Method 3: Using the <link> element

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

<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 the example mentioned here, the media attribute instructs the browser to load an external style sheet "screen.css" and for using its styles only for the screen while "print.css" for printing purposes. 

Tip: Multiple media types can also be specified (each separated with a comma, e.g., media= " screen, print") and media queries to the <link> element.

Different Media Types

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

Warning: However, there are different media types to choose from, but most browsers only support all screen and print media types.