- Defining rules that apply to a specific media
- Can be done via a linked style sheet for that media
- Can be done via importing a media-specific stylesheet
- @media rule defines media type or types that rule applies to
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" media="print" href="print_stylesheet.css"/>
<style type="text/css" media="print">
@import url="print_stylesheet.css" media="print";
...
@media print, handheld { body { font-size: 10pt } }
@media print { #navigation { display:none } }
@media screen { body { font-size: 16pt } }
@media projection
{
body { font-size: 16pt }
p { font-size:10pt}
...
}
</style>
- First linked stylesheet applies to all media
- Second stylesheet takes precedence over these rules when printing