7. CSS Media Type

Different styles can be applied to a page view depending on the medium it is being used through. Internal and externalized style sheets can be associated with a media type via the media attribute.

Possible Media Types

Media Type	Description
all	Used for all media types, default if none specified.
aural	Speech and sound synthesizers.
braille	Braille or tactile feedback devices.
embossed	Paged Braille printers.
Handheld	Small or handheld devices.
Print	Printers.
Projection	Projection presentations like slide shows.
Screen	Computer screens.
Tty	Fixed-pitched character grid like teletypes and terminals.
Tv	Television devices.

Example 7.1 Exsternalized Style Sheet Associated with a Print Media Type

<link rel="stylesheet" type="text/css" href="sample.css" media="print" />

Example 7.2 Internalized Style Sheet Associated with a Print Media Type

<style type="text/css" media="print">
...
</style>

Multiple media types can be assigned to a style sheet by adding a comma-separated list of values to the media attribute.

Example 7.3 Multiple Media Types Assigned to an Externalized Style Sheet

<link
    rel="stylesheet"
    type="text/css"
    href="sample.css"
    media="print,handheld"
/>

Example 7.4 Multiple Media Types Assigned to an Internalized Style Sheet

<style type="text/css" media="print,handheld">
...
</style>

Multiple media style definitions can be stored in one style sheet using @media rule.

Example 7.5 Multiple Media Style Definitions in One Style Sheet

<style type="text/css">
@media print,handheld {
    body {
        background:#FFF;
    }
}
@media screen {
    body {
        background:url(checkers.jpg);
    }
}
</style>