Cascading Style Sheets/Media Types

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.