HTML and CSS Reference
In-Depth Information
color:blue;
}
@media print {
h1 {
color:black;
}
h2 {
color:gray;
}
}
</style>
Creating a Print Style Sheet
In our experience, the greatest use you'll have for different media types is with printed output.
There are a few quirks to be aware of (and we'll cover those), but it's very well supported in
general and can be put to great use.
We've mentioned the various techniques that you can use to link to a style sheet with dif-
ferent media. Our preference is to do the following:
•
Create a basic CSS file that contains generic visual styles that are understood by most
browsers. Avoid CSS layout and anything that could be considered intermediate-to-
advanced CSS. This CSS file is attached to the document using a
link
element but
without specifying any media type whatsoever.
•
Create a second style sheet that is used for more advanced screen styles and use the
@import
statement embedded in the
basic.css
file to attach it. Netscape 4 won't see this
advanced file, but other newer browsers will.
Create a print-only style sheet and attach it using the
link
element with
media="print"
.
•
■
Note
You should declare the print style sheet last (link to it even after any
<style></style>
block
inside the HTML page). If you declare the print style sheet first, you could undo any values set there in the
subsequent generic style sheets if they are not scoped for
screen
or some other medium.
Translating that English into markup, we get this in the document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple print test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/print.css" media="print" />
</head>
