Beginning XHTML | 10 | WebReference

Beginning XHTML | 10

To page 1To page 2current page
[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:

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.

To page 1To page 2current page
[previous]


Created: April 4, 2001
Revised: April 4, 2001

URL: http://webreference.com/authoring/languages/xhtml/beginning/chap13/2/