Media Types
Clipboard

To do:
Format; flesh out.

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.


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

Cascading_Style_Sheets/Media_Types
 



 

Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.


Manage research, learning and skills at defaultLogic. Create an account using LinkedIn or facebook to manage and organize your Digital Marketing and Technology knowledge. defaultLogic works like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us















Warning: Unknown: write failed: No space left on device (28) in Unknown on line 0

Warning: Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (/tmp) in Unknown on line 0