Using the <link> Element

The second mechanism for associating style sheets with media types is to use the <link> elements media attribute, which specifies the intended destination media for the external style information. This allows user agents to load and apply external style sheets based on the characteristics of the media where the document is being rendered.

For example, if you write:

<head>

</head>

you are indicating that the myprint.css style sheet should be used when printing the document, and that the myscrn.css style sheet should be used when displaying the document.

At the time that this book was written, only Microsoft Internet Explorer properly supported the <link> element with media types. With Netscape Navigator, if you specify anything other than the screen media type, Navigator will ignore the entire element, and therefore ignore the entire external style sheet!

Try It Out – Using the <link> Element to Handle Different Media Types

In this exercise, we will use two external style sheets to control the display and printing.

Type the following into your text editor:

body { font-size: 18pt }

span.speaker { background-color: yellow }

.stage { font-style: italic }

p.stage { text-align: center }

Save the file as linkscrn.css

Create a new document in your text editor and type the following:

body { font-size: 10pt }

span.speaker { font-weight: bold }

.stage { font-style: italic }

p.stage { text-align: center }

Save this file as linkprnt.css

Edit the file style1.htm and make the following changes to the <head> section:

<head>

<title>Tempest Links</title>

</head>

Save the file as link.htm and run it in Microsoft Internet Explorer. You should see something like:

From within your browser, select the File | Print menu item. You should see something like:

How It Works

We simply took our two style sheets out of the document and put them into separate documents of their own. Note that the content of the style sheets wasn't changed in any way, so that what is seen on the browser and the printed page are identical to those of the last example. In the <head> of the document, we simply associate these external style sheets with the document content like so:

<head>

<title>Tempest</title>

</head>

We can see that there are two <link> elements. The first identifies the style sheet to use for the print media type and the second identifies the style sheet to use for the screen media type. The files were the style information is contained is given as the value of the href attribute.

When we looked at our document in the web browser, the style sheet corresponding to the screen media type was opened and used. When we sent our document to the printer, the style sheet corresponding to the print media type was opened and used instead.

Using the '@media' Rules

The third mechanism for associating style sheets with media types is to use the @media rules. This specifies the target media types for a set of style sheet rules. For example, if you write:

@media screen {

h1 { font-size: 18pt }

}

@media print {

h1 { font-size: 10pt }

}

@media screen, print {

h1 { text-align: center }

}

…you are indicating that first level header has an 18-point font when displayed on the screen, a 10-point font when printed, and center-aligned on both media types. The third of the @media rules above points out that @media rules may apply to more than one media type. In this case, media types are separated by a comma.

Note that @media rules are applied in the order in which they are processed. In other words, if two applicable @media rules define different styles for the same element or selector, the latter @media rule will apply. For example, if we wrote:

@media print {

h1 { font-size: 10pt }

}

@media screen, print {

h1 { font-size: 18pt; text-align: center }

}

an 18pt font will be used when displaying on the screen and when printing. With @media rules, you can specify media-dependencies within an internal style sheet or with an external style sheet.

Using '@media' Rules Within an XHTML Document

In order to specify media dependencies within an internal style sheet, you simply include the above information within your document by use of the <style> element:

<head>

...

<!--

@media screen {

h1 { font-size: 18pt }

}

@media print {

h1 { font-size: 10pt }

}

@media screen, print {

h1 { text-align: center }

}

-->

</style>

...

</head>

In this example, the <style> element's content is three @media rules. The first @media rule applies to the screen media type, the second to the print media type, and the third to both screen and print media types. The benefit of this approach is that common styles (such as center-alignment in the example above) can be collected under one @media rule to reduce redundancy and improve maintainability of the style information. The greatest benefit, however, of using @media rules is when they are used in external style sheets.

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:

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:

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 <head> section to the following, and save as atmedia.htm:

<head>

<title>Tempest @media</title>

</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:

<!--

@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:

<!--

@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.