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.

Whitepapers and eBooks

Microsoft Articles: Visual Studio 2010
Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
Microsoft Whitepaper: How Windows Server 2008 R2 Helps Optimize IT and Save You Money
Adobe Article: Java Developers Finding a Home at Adobe Flex
IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking
Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3--New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Downloads and eKits

Tutorials and Demos

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