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>