This is how I have linked the CSS-files to this document:
<link rel="stylesheet" type="text/css"
media="screen" href="screen-example.css" />
<link rel="stylesheet" type="text/css"
media="print" href="print-example.css" />
<link rel="stylesheet" type="text/css"
media="handheld" href="handheld-example.css" />
The heading above, this paragraph and the list below will have different CSS properties and different values
for some of those properties dependent on the media type.
This is what the style sheets in the different CSS-files looks like :
.media-types-example {
color:#003366;
background:#fff;
margin-left:10px;
}
ul {
list-style:square;padding:0 5px 5px 20px;
}
h2 {
margin-left:10px;
font-size:1.4em
}
pre {
font-size:1.2em;
color:#000;
background:#eee;
width:80%;
padding:10px;
}
.media-types-example {
color:#000;
background:#fff;
margin-left:10px;
}
ul {
list-style:disc;
padding:0 5px 5px 20px;
}
h2 {
margin-left:10px;
font-size:1.2em;
}
pre {
background:#fff;
}
.media-types-example {
color:#003366;
background:#fff;margin-left:4px;
}
ul {
list-style:disc;
padding:0 5px 5px 7px;
}
h2 {margin-left:4px;
font-size:1.1em
}
pre {
background:#003366;
color:#fff;
}