Using Style Sheets

Alternate Style Sheets and Media Types

Alternate Style Sheets

One advantage of using external style sheets is the ability to define alternate style sheets. Normally, when multiple style sheets are included in a page, all are applied to it. But with alternate style sheets, you can give the user a choice.

You can define a style sheet, or a group of style sheets, as either "persistent," "preferred" or "alternate." Persistent style sheets are always applied to a page. But alternate style sheets are mutually exclusive. The user may select any one group and it will be applied but all the other alternates will be ignored. One of these alternates may be designated as the preferred style sheet group, which will be selected by default when the page is initially loaded.

Below is an example of the HTML code for defining these style sheet types.

<link href="persistent.css"  type="text/css" rel="stylesheet">
<link href="preferred.css"   type="text/css" rel="stylesheet"
      title="Preferred">
<link href="alternate1.css"  type="text/css" rel="alternate stylesheet"
      title="Alternate One">
<link href="alternate2a.css" type="text/css" rel="alternate stylesheet"
      title="Alternate Two">
<link href="alternate2b.css" type="text/css" rel="alternate stylesheet"
      title="Alternate Two">

Here, the "persistent.css" style sheet will always be applied to the page. The browser knows it's persistent because it has no TITLE attribute.

The other three do have TITLE attributes, however, so the browser knows they are alternate style sheets. They are grouped according to the title name so here there are three groups in all, "Preferred," "Alternate One" and "Alternate Two." Note that "Alternate Two" consists of two style sheets.

The browser should allow the user to select any of these three groups. When any one is selected, it is applied and the other two are ignored.

The "Preferred" group will be the default, because it's REL attribute is set to "stylesheet" while the other two groups are set to "alternate stylesheet".

You can see how this works in this demo, if your browser supports alternate style sheets.

Media Types

CSS also provides a means to specify alternate styles for different media. This includes print and speech or braille devices for the visually impaired. A list of such specialized software and devices can be found on the W3C's Web Accessibility site.

Making web pages work with these types of browsers may be critical to some sites (like goverment agencies that must comply with accessibility laws) or simply beneficial to others. CSS's support of multiple media types makes it easier to address accessibility without compromizing your site's look.

Support for separate print-only styles should appeal to anyone who has had to design special templates and code server-side scripts to generate alternate, "printer-friendly" pages.

@-Rules

CSS defines some special rules denoted by the '@' character. Among these are @import which let's you include an external style sheet and @media which delimits style rules for a given media type.

The @import rule may be included at the beginning of any style sheet. It expects the URL of a file containing additional style rules to add to the current style sheet. It optionally allows you to specify a list of media types.

@import "/styles/defaults.css";
@import url(/styles/forum.css);
@import url("/styles/print.css") print, handheld;

In the above, the first two rules import a pair of external style sheets. The third rule specifies an external style sheet for two media types, print and handheld. The advantage of declaring media types in this case is that the browser need not load the last style sheet (unless it is a handheld device) or can wait to load it only if the user prints the page.

Note that @import rules must be included at the start of a style sheet, outside of any blocks. In the following, the first @import rule is valid but the other two would be ignored.

@import "sheet1.css"
body {
  @import "sheet2.css"
  background-color: black;
  color: white;
}
@import "sheet3.css"

The @media Rule

The @media rule designates a block of rules that apply only to the specified media type or types. For example, a page with light colored text on a black background may look great onscreen, but may be unreadable when printed. So you could specify a style sheet like this:

body {
  background-color: #ffff00;   /* yellow text on a black background */
  color: #ffffff;
}

@media print {

  body {
    background-color: #ffffff; /* black text on a white background */
    color: #000000;
  }
}

Note the curly braces surrounding the print rules. You can also specify a list of media types on the @media rule by separating the keywords with commas.

Designating Media on LINK and STYLE Tags

You can also specify media types on the HTML LINK and STYLE tags using the MEDIA attribute.

<link href="default.css" rel="stylesheet" type="text/css"
      media="screen,projection">
<style type="text/css" media="screen,projection">

...style rules...

</style>

Again, multiple media types can be specified as a comma-separated list.

Prev | Next