Beginning XHTML | 10
  [previous] |
Beginning XHTML
Using '@media' Rules Within External Style Sheets
In order to specify media-dependencies within an external style sheet is quite straightforward. Simply write your rules in a separate file:
/* mystyle.css */
@media screen { /* style rules for screen devices */
h1 { font-size: 18 }
}
@media print { /* style rules for print devices */
h1 { font-size: 10 }
}
@media screen, print { /* style rules shared by screen and print devices */
h1 { text-align: center }
}and save as, for example, mystyle.css. Then, as we've done before, simply use the href attribute of the <link> element to reference the style sheet from within the XHTML document:
<link rel="stylesheet" type="text/css" href="mystyle.css" />Make sure, though, that you do not use the <link> elements media attribute in addition to the @media rules within the external style sheet - the Web browser might not download your style sheet!
Try It Out - Using the '@media' Rules to Create Media-Dependent Style Sheets
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:
-
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 <head> 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.
|
[previous] |
Created: April 4, 2001
Revised: April 4, 2001
