CSS Cascade Rules

2008 Nov 04

Cascade Rules

Styles can be applied in different ways and there are cascade rules which specify which ways override others.

The most overriden way is:

<html>
  <head>
    <title>...</title>
    <link rel="stylesheet" <!-- required -->
          type="text/css" <!-- required -->
          href="rules.css" <!-- url of external style sheet -->
          media="all" <!-- optional -->
          title="Funny" <!-- rarely used -->
    />
  </head>
  <body>
  ...
  </body>
</html>

Multiple style sheets can be loaded by using more than one link elements, in which case the combining rules apply.

To apply a style sheet to an XML document: 
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="foo.css"?>

<name_space:root_element_name ... >
  ...
</name_space:root_element_name ...>

The next most overriden way is:

<html>
  <head>
    <title>...</title>
    <style type="text/css">
    ... style statements ...
    </style>
  </head>
  <body>
  ...
  </body>
</html>

@import

Optionally, (and as the) first element within the style element (before any rules), there can be one or more imports:

@import url(rules.css);

i.e. before the style statements. As with link the import directive can be qualified with a media attribute list, e.g.:

@import url(rules.css) screen, print;

The least overriden way is to have a style in an element with specific attributes, or with the style attribute, e.g.:

<p style="color: teal;">text...text</p>

The new style attribute is like a CSS rule except that the curly braces are replaced with double quotes. The style attribute is not recommened.

Cascade Rule Precedence

  1. Find all declarations that contain a selector that matches a given element.
    2. Sort by weight all declarations for an element. Thse rules with the !important value at the end (i.e. just before the ; ) have highest precedence. Sort by origin, which in order of highest precedence are:
  2. Sort by specificity (i.e. use of id, which wins over class).
  3. Sort by order - the later a declaration is given the higher its weight.

Which results in precedence by weight:

  1. reader important - highest
  2. author important
  3. author normal
  4. reader normal
  5. agent - lowest

rel - Relationship Values

Value Meaning
stylesheet Use in all presentation media.
alternate stylesheet Allows the user to choose style when properly implemented.

Media Attribute Values

Value Meaning
all Use in all presentation media.
aural Use in speech syhthesizers, screen readers, etc.
braille Use with Braille rendering devices.
embossed Use when printing with a Braille printer.
handheld Use on handheld devices (e.g. pda's or cell phones).
print Use when printing the document or during print preview.
projection Use with projection devices.
screen Use with monitor.
tty Use with fixed-pitch devices like a teletype.
tv Use when document is presented on a television.

The media attribute value can be a comma separated list, e.g.:

media="print,aural"

Note that not all media values are supported by most browsers.

Title Attribute

If a title attribute is not given then the referenced style is persistent, i.e. is always used.