HTML and CSS Reference
In-Depth Information
Specifying the Media Type
Next, let's look at how you can tell the user agent which medium (or media) the styles you are
asking it to render should apply to.
Adding a media Attribute to the link Element
Arguably, the simplest method for linking to a style sheet is to use the
link
element, like so:
<link rel="stylesheet" href="css/mainstylesheet.css" />
This code tells the user agent that the link is to a style sheet and where it can find the link
(
css/mainstylesheet.css
). The user agent will then deal with the link however it sees fit. You
can, however, “scope” the use of the CSS contained in that style sheet with the
media
attribute:
<link rel="stylesheet" href="css/mainstylesheet.css"
media="screen"
/>
In this example, only devices that will be displaying the content on a large screen will do any-
thing with that style sheet. And where
screen
is concerned, that pretty much means a PC
(Windows, Mac, Linux, etc.) and a web browser (Firefox, IE, and so on).
Adding a media Attribute to the @import Statement
If you are using the
@import
method for linking to a style sheet (perhaps to throw older, non-
standards-friendly browsers like Netscape 4 off the scent), you could use the following syntax:
<style type="text/css">
@import url("css/printstylesheet.css")
print
;
</style>
There is a small problem with this approach, however: IE versions 6 and earlier won't deal
with this syntax (at the time of this writing, IE 7 didn't understand this construct either), so
you're probably going to have to use the previous method for linking wholesale to a CSS file.
■
Note
You can place the
@import
statement in a style block as shown in the example, or you can embed
that
@import
statement in another style sheet that is already linked to the document, but the
@import
statement must be at the beginning of that style sheet, not after any other CSS selectors.
Adding the Media to Specific Selectors within a Style Sheet
Finally, you can embed some media-specific styles within another style sheet like so:
<style type="text/css">
body {font-size:62.5%;
h1 {
color:red;
}
h2 {
