CSS Media Selectors

You can make one web page look and feel differently over many different media types by using the media attribute inside the link element when referring to an external stylesheet.

For example, we are used to linking to a stylesheet using the following syntax:

<link rel="stylesheet" type="text/css"
             href="/library/css/style.css" />

By including a media attribute, we can limit this stylesheet to a particular media type. For example:

<link rel="stylesheet" type="text/css"
             href="/library/css/style.css" media="screen" />

Potentially, this allows us to format our site differently depending on how the user is viewing the page.
There are many different values that can be used with the media attribute, but some of the most useful are detailed below:

Using these rules, you could potentially have multiple stylesheets for one page. For example:

<link rel="stylesheet" type="text/css"
             href="/library/css/basic.css" media="all" />

<link rel="stylesheet" type="text/css"
             href="/library/css/screen.css" media="screen" />

<link rel="stylesheet" type="text/css"
             href="/library/css/print.css" media="print" />

<link rel="stylesheet" type="text/css"
             href="/library/css/mobile.css" media="handheld" />

Using media types is not limited to the link element. You can embed media styles within a single stylesheet. For example:

h1 {
    margin:5px 0;
    font-size:24px;color:navy;
}

@media print {
    h1 {
        color:black;
    }
}

Tags: CSS, Media, Stylesheets