Creating Media-Dependent Style Sheets
October 30, 2000
In this exercise, you will use @media rules to create a single style sheet
that handles multiple media types. This is very similar to the previous
examples, so we shall not show you any screen shots or go through the
stages of showing you non-styled printouts etc. By this stage, you know
that we need different styles for different media. However, here's our
trusty example again only done this time with @media rules:
1. Type the following into your text editor and save as atmedia.css:
@media screen {
body { font-size: 18pt }
span.speaker { background-color: yellow }
.stage { font-style: italic }
p.stage { text-align: center }
}
@media print {
body { font-size: 10pt }
span.speaker { font-weight: bold }
.stage { font-style: italic }
p.stage { text-align: center }
}
Now edit the file link.htm, change the section to the following, and
save as atmedia.htm:
<head>
<title>Tempest @media</title>
<link rel="stylesheet" type="text/css" href="atmedia.css"/>
</head>
Running this in your browser, and printing the page, you will see that both
are properly formatted according to the styles contained in the atmedia.css
file, and will look identical to those shown in Steps 6 and 7 of the
previous example using the <link> element.
How It Works
As before, we created an external style sheet but this time with two @media rules, one for the screen and one for the printed page, and then referenced it using the
<link> element. Unlike the previous exercise, we do not set the <link> element's media attribute. This is because we want to use the external style sheet for all
media types.
Using the '@import' Rules
The fourth mechanism for associating style sheets with media types is to
use the @import rules. These provide a way to automatically merge style
rules from one style sheet into the style section of your XHTML document:
<style type="text/css">
<!--
@import url("mystyle.css");
/* rest of style section */
-->
</style>
If you want the import to be media-dependent, you simply add the media type
after the url:
<style type="text/css">
<!--
@import url ("mystyle.css") screen;
/* rest of style section */
-->
</style>
Unfortunately, at the time that this book was written, the major browsers
did not support the media-dependent @import rules (Microsoft's Internet
Explorer does support the general @import rule, though).
The imported file need not be local; for example, the following is valid:
@import url("http://www.madeupdomain.com/reallygoodstyle.css");
This informs the browser to load the style sheet from the server at
www.madeupdomain.com and use this to display the document. Styles within
this imported sheet may be overridden by specifying styles within the XHTML
document using those tags previously described. The advantage of importing
a style sheet is that it allows us to create a basic template for all our
web pages, from which individual documents may 'diverge' with overridden
styles.
Using the '@media' Rules
Beginning XHTML
Printing and Paginated Media
|
