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
  • 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: 640pxdiv>

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



  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.


Manage research, learning and skills at IT1me. Create an account using LinkedIn to manage and organize your IT knowledge. IT1me works like a shopping cart for information -- helping you to save, discuss and share.

  Contact Us  |  About |  IT Training & References |  IT Careers |  IT Hardware |  IT Software |  IT Books