CSS Media Types
Media Types allow you to specify how documents will be presented
in different media. The document can be displayed differently on the screen, on
the paper, with an aural browser, etc.
Media Types
Some CSS properties are only designed for a certain media. For example the
"voice-family" property is designed for aural user agents. Some other
properties can be used for different media types. For example, the
"font-size" property can be used for both screen and print media, but
perhaps with different values. A document usually needs a larger font-size on a
screen than on paper, and sans-serif fonts are easier to read on the screen, while
serif fonts are easier to read on paper.
The @media Rule
The @media rule allows different style rules for different media in the same style sheet.
The style in the example below tells the browser to display a 14 pixels
Verdana font on the screen. But if the page is printed, it will be in a 10
pixels Times font. Notice that the font-weight is set to bold, both on screen
and on paper:
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px}
}
@media print
{
p.test {font-family:times,serif;font-size:10px}
}
@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>
<body>
....
</body>
</html> |
See it yourself ! If you are using Mozilla/Firefox or IE 5+ and print this page, you will see
that the paragraph under "Media Types" will be displayed in another font, and have a
smaller font size than the rest of the text.
Different Media Types
Note: The media type names are not case-sensitive.
| Media Type |
Description |
| all |
Used for all media type devices |
| aural |
Used for speech and sound synthesizers |
| braille |
Used for braille tactile feedback devices |
| embossed |
Used for paged braille printers |
| handheld |
Used for small or handheld devices |
| print |
Used for printers |
| projection |
Used for projected presentations, like slides |
| screen |
Used for computer screens |
| tty |
Used for media using a fixed-pitch character grid, like teletypes and terminals |
| tv |
Used for television-type devices |
Make your web applications look like a million bucks
|
|
Most web applications today use boring methods to present data to their viewers using grids or simple HTML tables. FusionCharts induces "life" into the web applications by converting monotonous data into lively charts, gauges & maps.
FusionCharts works with all technologies like ASP, ASP.NET, PHP, ColdFusion, Ruby on Rails, JSP, HTML pages etc.
and connects to any database to render animated & interactive charts. It takes less than 15 minutes and no expertise
whatsoever to build your first chart and just a glance of it to captivate your audience. This fact is endorsed by our
12,000 customers and 150,000 users which include a majority of the Fortune 500 companies.
And yeah, your applications could look like a million bucks by spending just $69.
So go ahead, download your
copy of FusionCharts and start "wow-ing" your customers now!
|
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
|
