Cascading Style Sheets/Media Types

Individual CSS rules and whole style sheets can be made apply selectively only to certain media types, such as screen, projection, print or handheld.

Specification of media types:

• In the LINK tag
  • <LINK rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">
• Within the style sheet
  • @media screen {
    body { font-family: Verdana; width: 800px; }
    }
• Within the style attribute

Media types

Media types by which the application of CSS can be restricted:

• all
• aural – is generally used for rules for the hearing impaired. In CSS3 it is being deprecated in favor of the speech media type.
• braille
• embossed
• handheld
• print
• projection
• screen
• speech
• tty
• tv

Media Queries

Media queries are a new rule format under CSS3 that will allow for behaviors based on properties of the user agent, such as the screen resolution of mobile devices. This feature is only partially implemented in the latest builds of WebKit, Presto and Gecko.

To try this out copy this code to your snippet editor or a new HTML file:

@media all {
	div.mediaqueryexample {
		height: 10em;
		width: 10em;
		background-color: red;
	}
}

@media all and (min-width: 640px) {
	div#mediaqueryexample1 {
		background-color: green;
	}
}

And then put this in the body:

<div class="mediaqueryexample" id="mediaqueryexample1">min-width: 640px</div>

After loading the page in your browser, resize the window to see the background color change when the condition is met.