Using @media in Cascading Style Sheets

Defining Media Types

Using @media allows you to define styles within an internal style sheet for specific media types. This will allow your documents to be formatted correctly no matter how they are displayed or used.

How to Define @media Types

<style type="text/css">
@media print {
p { font-size : 12pt; }
}
@media screen {
p { font-size : 100%; }
}
</style>

This style sheet says that in print paragraphs should be written in 12pt type, while on screen they should be written at 100% of the current browser font setting.

Browser Support

Netscape 4, Windows IE 4, and Mac IE 5 and 4 don't support the @media declaration.