WD-css3-cascade-20051215 30.3 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head><meta content="text/html" http-equiv=Content-Type>

  <title>CSS3 module: Cascading and inheritance</title>
  <link href=default.css rel=stylesheet type="text/css">

  <style type="text/css">
    table { border-collapse: collapse; border: 1px solid black }
    th, td { border: 1px solid black; padding: 0.2em; text-align: left }
  </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel=stylesheet
  type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a class=logo href="http://www.w3.org/" rel=home><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1 id=css3-module>CSS3 module: Cascading and inheritance</h1>

   <h2 class="no-num no-toc" id=w3c-working>W3C Working Draft 15 December
    2005</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a>


    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-cascade">http://www.w3.org/TR/css3-cascade</a>


    <dt>Previous version:

    <dd><a
     href="http://www.w3.org/TR/2002/WD-css3-cascade-20020219">http://www.w3.org/TR/2002/WD-css3-cascade-20020219</a>


    <dt>Editor:

    <dd>Håkon Wium Lie, Opera Software, howcome@opera.com
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">
    Copyright</a> &copy; 2005 <a href="http://www.w3.org/"><abbr title="World
    Wide Web Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of
    Technology">MIT</abbr></a>, <a href="http://www.ercim.org/"><acronym
    title="European Research Consortium for Informatics and
    Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>This CSS3 module describes how values are assigned to properties. CSS
   allows several style sheets to influence the rendering of a document, and
   the process of combining these style sheets is called
   &ldquo;cascading&rdquo;. If no value can be found through cascading, a
   value can be inherited from the parent element or the property's initial
   value is used.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-cascade&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-cascade<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a href="/Style/CSS/members">CSS
   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

  <p>This document was produced under the <a
   href="/TR/2002/NOTE-patent-practice-20020124">24 January 2002 CPP</a> as
   amended by the <a href="/2004/02/05-pp-transition">W3C Patent Policy
   Transition Procedure</a>. The Working Group maintains a <a
   href="/Style/CSS/Disclosures" rel=disclosure>public list of patent
   disclosures</a> relevant to this document; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains Essential
   Claim(s) with respect to this specification should disclose the
   information in accordance with <a
   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section&nbsp;6
   of the W3C Patent Policy</a>. <!--end-status-->

  <p>This is a draft of a <a href="http://www.w3.org/TR/css3-roadmap/">module
   of CSS level 3</a>. It will probably be bundled with some other modules
   before it becomes a <a href="http://www.w3.org/TR/#About">W3C
   Recommendation</a>.

  <p>The main purpose of this module is to rewrite the relevant parts of CSS2
   as a module for CSS3. With the exception of the <code
   class=css>'initial'</code> value and the optional title for <code
   class=css><a href="#import">'@import'</a></code> and <code class=css><a
   href="#media">'@media'</a></code>, all features described in this module
   also exist in CSS2. Compared to CSS2, the cascading order has been changed
   in two cases as noted in the text.

  <h2 class="no-num no-toc" id=table>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#dependencies"><span class=secno>1. </span>Dependencies on
    other modules</a>

   <li><a href="#introduction"><span class=secno>2. </span>Introduction</a>

   <li><a href="#input"><span class=secno>3. </span>Input and output of this
    module</a>

   <li><a href="#at-import"><span class=secno>4. </span>Style sheets
    including other style sheets: the <code>@import</code> rule</a>

   <li><a href="#at-media-rule"><span class=secno>5. </span>Rules for
    specific media: the <code>@media</code> rule</a>

   <li><a href="#cascading"><span class=secno>6. </span>Cascading</a>

   <li><a href="#inheritance"><span class=secno>7. </span>Inheritance</a>

   <li><a href="#initial0"><span class=secno>8. </span>Initial value</a>

   <li><a href="#computing"><span class=secno>9. </span>Computing weight</a>

   <li><a href="#conformance"><span class=secno>10. </span>Conformance</a>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      references</a>

     <li class=no-num><a href="#other-references">Other references</a>
    </ul>
  </ul>
  <!--end-toc-->

  <hr>

  <h2 id=dependencies><span class=secno>1. </span>Dependencies on other
   modules</h2>

  <p>This CSS3 module depends on the following other CSS3 modules:

  <ul>
   <li>Selectors <a href="#SELECT"
    rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, which describes <strong
    class=index id=specificity>specificity</strong>

   <li>Syntax <a href="#CSS3SYN"
    rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a>, which describes how to
    parse CSS style sheets into <strong class=index id=declarations
    title=declaration>declarations</strong>

   <li>Media Queries <a href="#MEDIAQ"
    rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>, which describe how to
    restrict style sheets to certain types of devices.
  </ul>

  <p>It has non-normative (informative) references to the following other
   CSS3 modules:

  <ul>
   <li>Values and Units <a href="#CSS3VAL"
    rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>, which describes the
    computation from specified through computed to actual values
  </ul>

  <h2 id=introduction><span class=secno>2. </span>Introduction</h2>

  <p>One of the fundamental design principles of CSS is to allow several
   style sheets, possibly from different sources, to influence the rendering
   of a document. This CSS3 module describes how to select one among several
   conflicting declarations on a given element/property combination. The
   mechanism used in the selection process is called "cascading". When no
   declaration attempts to set the value of an element/property combination
   the value will either be inherited from the parent element, or set to the
   property's "initial value".

  <h2 id=input><span class=secno>3. </span>Input and output of this module</h2>

  <p>The input to the cascading and inheritance process is:

  <ul>
   <li>The set of declarations that apply to the element/property combination
    in question. It is assumed that declarations that do not apply (e.g. due
    to the media type, or user selection of style sheets) is not included in
    the set.

   <li>The inherited value of the property.

   <li>The initial value of the property.
  </ul>

  <p>The output of the cascading and inheritance process is a single value,
   known as the <dfn id=specified>specified value</dfn>.

  <p>The specified value is found by using the following pseudo-algorithm:

  <ol>
   <li>If the cascading process (described below) yields a winning
    declaration and the value of the winning declaration is not <code
    class=css>'initial'</code> or <code class=css>'inherit'</code>, the value
    of the winning declaration becomes the specified value.

   <li>otherwise, if the value of the winning declaration is <code
    class=css>'inherit'</code>, the inherited value (see below) becomes the
    specified value

   <li>otherwise, if the value of the winning declaration is <code
    class=css>'initial'</code>, the initial value (see below) becomes the
    specified value

   <li>otherwise, if the property is inherited, the inherited value becomes
    the specified value

   <li>otherwise, the initial value becomes the specified value
  </ol>

  <p>The specified value may need some computation before it can be used. For
   example, the specified value of the <span
   class=property>'font-size'</span> property for a given element may be
   <code class=css>'10em'</code> which needs to be converted into
   device-specific units before being used to render a document. Computations
   on specified values are described in the <a href="/TR/css3-values">Values
   and Units</a> <a href="#CSS3VAL"
   rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> module.

  <h2 id=at-import><span class=secno>4. </span>Style sheets including other
   style sheets: the <code><a href="#import">@import</a></code> rule</h2>

  <p class=issue>[When this section is rewritten to define user agent
   conformance more clearly, it should state that (1) the media list
   specified in an @import rule prevents the import from being processed if
   the medium doesn't match, but it doesn't "associate" the media with the
   style sheet so that it can't be imported some other way. (2) @import
   without a medium must ignore any medium specified for the same style sheet
   in a link from a document.]

  <p>The <dfn id=import>'@import'</dfn> rule allows users to import style
   rules from other style sheets. Any <code class=css><a
   href="#import">'@import'</a></code> rules must follow all <code
   class=css>'@charset'</code> rules and precede all other at-rules and rule
   sets in a style sheet. The <code class=css><a
   href="#import">'@import'</a></code> keyword must be followed by the URI of
   the style sheet to include. A string is also allowed; it will be
   interpreted as if it had url(&hellip;) around it.

  <div class=example>
   <p>The following lines are equivalent in meaning and illustrate both <code
    class=css><a href="#import">'@import'</a></code> syntaxes (one with <code
    class=css>'url()'</code> and one with a bare string):

   <pre>
@import "mystyle.css";
@import url("mystyle.css");
</pre>
  </div>

  <p>So that user agents can avoid retrieving resources for unsupported media
   types, authors may specify media-dependent @import rules. These <dfn
   id=conditional title="conditional import|media-dependent
   import">conditional imports</dfn> specify comma-separated &ldquo;media
   queries&rdquo; after the URI.

  <div class=example>
   <p>The following rules illustrate how <code class=css><a
    href="#import">'@import'</a></code> rules can be made media-dependent:

   <pre>
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
</pre>
  </div>

  <p>The full syntax of the expressions after the URL is defined by the Media
   Queries specification <a href="#MEDIAQ"
   rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>.

  <p>In the absence of any media queries, the import is unconditional.
   Specifying <span class=property>'all'</span> for the medium has the same
   effect.

  <p>At the end of the <code class=css><a href="#import">'@import'</a></code>
   rule (after any media queries), there may be a string that assigns a name
   to the import.

  <div class=example>
   <pre>
@import url(layout1.css) screen "Plain style";
@import url(colors1.css) screen "Plain style";
@import url(style4.css) "Four-columns and dark";
</pre>
  </div>

  <p>Imports with different names (together with any named <a
   href="#at-media-rule">@media rules,</a> see below) represent <dfn
   id=alternative>alternative style sheets</dfn>. The UA should provide a way
   for the user to select an alternative by name.

  <p>The rules for which style sheet to import are as follows:

  <ul>
   <li>
    <p>If the user has not chosen a style by name (e.g., he has indicated to
     the UA that he wants the default style), then all <code class=css><a
     href="#import">'@import'</a></code>s without a name are imported, as
     well as the first <code class=css><a href="#import">'@import'</a></code>
     that has a name and all other <code class=css><a
     href="#import">'@import'</a></code>s that have the same name.

    <div class=example>
     <p>If the UA is using the default style, only &ldquo;Yellow Fish&rdquo;
      and the nameless <code class=css><a
      href="#import">'@import'</a></code>s (shown in
      <code><b>bold</b></code>) are used, the others are skipped:

     <pre>
<b>@import "common1.css";</b>
<b>@import "yellowfish.css" "Yellow Fish";</b>
@import "simple.css"     "Simple";
<b>@import "extra.css"      "Yellow Fish";</b>
@import "deco-a.css"     "Budapest";
@import "deco-b.css"     "Budapest";
<b>@import "common2.css";</b>
</pre>
    </div>

   <li>
    <p>If the user has chosen a style be name, then all <code class=css><a
     href="#import">'@import'</a></code>s without a name are imported, as
     well as all <code class=css><a href="#import">'@import'</a></code>s with
     the name chosen by the user.

    <div class=example>
     <p>If the user has chosen the &ldquo;Simple&rdquo; style, only
      &ldquo;Simple&rdquo; and the nameless <code class=css><a
      href="#import">'@import'</a></code>s (all shown in
      <code><b>bold</b></code>) are used, the others are skipped:

     <pre>
<b>@import "common1.css";</b>
@import "yellowfish.css" "Yellow Fish";
<b>@import "simple.css"     "Simple";</b>
@import "extra.css"      "Yellow Fish";
@import "deco-a.css"     "Budapest";
@import "deco-b.css"     "Budapest";
<b>@import "common2.css";</b>
</pre>
    </div>
  </ul>

  <p>Style sheets are only imported if the media query on the <code
   class=css><a href="#import">'@import'</a></code> (if any) matches the
   media for which the UA renders the document.

  <p>If an <code class=css><a href="#import">'@import'</a></code> is skipped,
   then all <code class=css><a href="#import">'@import'</a></code>s inside
   the style sheet it points to are also skipped, no matter what their names.


  <p class=note>HTML <a href="#HTML401"
   rel=biblioentry>[HTML401]<!--{{HTML401}}--></a> uses the term <dfn
   id=preferred>preferred style sheet</dfn> for the named style sheets that
   the author marked as the default. In CSS, these are all style sheets whose
   name is the first name to occur on any <code class=css><a
   href="#import">'@import'</a></code> or <code class=css><a
   href="#media">'@media'</a></code>. <dfn id=alternate>Alternate style
   sheets</dfn> are all other named style sheets. Finally, HTML calls style
   sheets without a name <dfn id=persistent>persistent style sheets</dfn>,
   because they are imported together with the preferred ones as well as with
   any alternatives.

  <p class=note>The UA should not only provide the user with a choice of
   alternative style sheets, but should also allow the user to turn all style
   sheets off. See <span class=issue>[where?]</span>

  <p>The list of alternative style sheets that the user can choose from
   consists of

  <ul>
   <li>any names in the document source itself (such as <code
    class=html>title</code> attributes on <code class=html>link</code> and
    <code class=html>style</code> elements in HTML and<code
    class=xml>title</code> pseudo-attributes on <code
    class=xml>&lt;?xml-stylesheet?&gt;</code> instructions),

   <li>the names of <code class=css><a href="#media">'@media'</a></code> and
    <code class=css><a href="#import">'@import'</a></code> rules that occur
    in linked style sheets that don't have a name on the link, and

   <li>the names of <code class=css><a href="#media">'@media'</a></code> and
    <code class=css><a href="#import">'@import'</a></code> rules that occur
    in style sheets linked from <code class=css><a
    href="#import">'@import'</a></code> rules that have no name, recursively.

  </ul>

  <p>I.e., the UA must not look for additional names by following links with
   a <code class=html>title</code> attribute or named <code class=css><a
   href="#import">'@import'</a></code> rules.

  <p class=issue>Are names matched case-sensitively or case-insensitively?
   Property names and font names are case-insensitive, so it is probably most
   consistent to treat style sheet names the same way.

  <p class=issue>Would it be easier to read if we precede the name with a
   keyword or some punctuation? E.g., <code class=css>'@import url(foo.css)
   as "Boxed"'</code>.

  <h2 id=at-media-rule><span class=secno>5. </span>Rules for specific media:
   the <code><a href="#media">@media</a></code> rule</h2>

  <p>An <dfn id=media>@media</dfn> rule specifies the target media types
   (separated by commas) of a set of rules (delimited by curly braces). The
   <code class=css><a href="#media">'@media'</a></code> construct allows
   style sheet rules for various media in the same style sheet:

  <div class=example>
   <pre>
@media print {
  body { font-size: 12pt; }
  h1 { font-size: 24pt; }
}
@media screen and (color) {
  body { font-size: medium; }
  h1 { font-size: 2em; }
}
@media screen, print {
  body { line-height: 1.2; }
}
</pre>
  </div>

  <p>The full syntax of the expressions after <code class=css><a
   href="#media">'@media'</a></code> is defined by the Media Queries
   specification <a href="#MEDIAQ"
   rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>.

  <p>After the media queries, before the "{", there may be a string that
   assigns a name to the <code class=css><a href="#media">'@media'</a></code>
   rule.

  <div class=example>
   <pre>
@media all "Ultra blue" {
  body { background: blue }
  h1 { color: cyan }
}
@media screen, print "Simple and light" {
  body { background: white; color: #333 }
  h2 { font-size: bigger }
}
</pre>
  </div>

  <p>All <code class=css><a href="#media">'@media'</a></code> rules with a
   name, together with any <code class=css><a
   href="#import">'@import'</a></code> rules with the same name, present
   alternative style sheets. The UA must read the rules inside some <code
   class=css><a href="#media">'@media'</a></code> rules and skip others, as
   follows:

  <ul>
   <li>
    <p>If the user has not chosen a style by name, the UA must read all <code
     class=css><a href="#media">'@media'</a></code> rules of which (1) the
     media query matches the UA and (2) that either have no name or whose
     name is equal to that of the first named <code class=css><a
     href="#import">'@import'</a></code> or the first named <code
     class=css><a href="#media">'@media'</a></code>, whichever comes first.

    <div class=example>
     <p>If the user wants the UA to use the default style, the following
      example results in the UA reading the &ldquo;Reverse video&rdquo;
      style, the unnamed <code class=css><a href="#media">'@media'</a></code>
      rule and all rules that are not in any <code class=css><a
      href="#media">'@media'</a></code> (all shown in
      <code><b>bold</b></code>). We assume the UA uses the <code
      class=css>'screen'</code> media.

     <pre>
<b>body { background: white }</b>
<b>p { text-indent: 2em }</b>

<b>@media screen {
  h1 { font-size: xx-large }
}</b>
<b>@media screen "Reverse video" {
  body { background: black; color: white }
}</b>
@media screen, print "Rainbow style" {
  p { color: #E0D }
}
</pre>
    </div>

   <li>
    <p>If the user has chosen a style by name, the UA must read all <code
     class=css><a href="#media">'@media'</a></code> rules (1) of which the
     media query matches the UA and (2) that either have no name or whose
     name is equal to the user's chosen name.

    <div class=example>
     <p>If the user wants the UA to use the &ldquo;Rainbow style&rdquo;
      style, the following example results in the UA reading the
      &ldquo;Rainbow style&rdquo; <code class=css><a
      href="#media">'@media'</a></code> rule, the unnamed <code class=css><a
      href="#media">'@media'</a></code> rule and all rules that are not in
      any <code class=css><a href="#media">'@media'</a></code> (all shown in
      <code><b>bold</b></code>). We assume the UA uses the <code
      class=css>'screen'</code> media.

     <pre>
<b>@import url(base.css);</b>
@import url(altbase.css) "Reverse video";

<b>body { background: white }</b>

<b>@media screen {
  h1 { font-size: xx-large }
}</b>
@media screen "Reverse video" {
  body { background: black; color: white }
}
<b>@media screen, print "Rainbow style" {
  p { color: #E0D }
}</b>
</pre>
    </div>
  </ul>

  <h2 id=cascading><span class=secno>6. </span>Cascading</h2>

  <p>The purpose of cascading is to find one <dfn id=winning>winning
   declaration</dfn> among the set of declarations that apply for a given
   element/property combination.

  <p>User agents must sort declarations according to the following criteria,
   in order of importance:

  <ol>
   <li>Weight. In CSS3, the weight of a declaration is based on the origin of
    the declaration and its marked level of importance. See a separate
    section below for how to compute the weight. The declaration with the
    highest weight wins.

   <li>Specificity. The <a href="/TR/css3-selectors">Selectors module</a> <a
    href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> describes
    how to compute the specificity. The declaration with the highest
    specificity wins.

   <li>Order of appearance. The last declaration wins. Rules in imported
    style sheets are considered to be before any rules in the style sheet
    itself. Rules in two imported style sheets are considered to be in the
    same order as the @import rules themselves.
  </ol>

  <p>The sorting process continues until one winning declaration is found.

  <h2 id=inheritance><span class=secno>7. </span>Inheritance</h2>

  <p>Inheritance is a way of propagating property values from parent elements
   to their children. Inheritance means that the specified value of a given
   element/property combination is copied from the computed value of the
   parent element. The root element, which has no parent element, inherits
   the initial value of the property.

  <p>Some properties are said to be <dfn id=inherited
   title=inheritance>inherited</dfn>. This means that, unless a value is
   specified for the element/property combination, the value will be
   determined by inheritance.

  <p>All properties accept the <code class=css>'inherit'</code> value which
   explicitly specifies that the value will be determined by inheritance. The
   <code class=css>'inherit'</code> value can be used to strengthen inherited
   values, and it can also be used on properties that are not normally
   inherited. If the <code class=css>'inherit'</code> value is set on the
   root element, the property is assigned its initial value.

  <h2 id=initial0><span class=secno>8. </span>Initial value</h2>

  <p>Each property has an <dfn id=initial>initial value</dfn> which becomes
   the specified value when cascading and inheritance does not yield a value.
   Also, the initial value can be explicitly specified with the <code
   class=css>'initial'</code> keyword which all properties accept.

  <h2 id=computing><span class=secno>9. </span>Computing weight</h2>

  <p>In order to sort declarations in the cascading process, the weight of a
   declaration must be known. In CSS3, the weight of a declaration is based
   on the origin of the declaration and its marked level of importance.

  <p>CSS style sheets may have three different origins: author, user, and
   user agent (UA).

  <ul>
   <li><strong>Author:</strong> The author specifies style sheets for a
    source document according to the conventions of the document language.
    For instance, in HTML, style sheets may be included in the document or
    linked externally.

   <li><strong>User:</strong> The user may be able to specify style
    information for a particular document. For example, the user may specify
    a file that contains a style sheet or the user agent may provide an
    interface that generates a user style sheet (or behave as if it did).

   <li><strong>User agent:</strong> <em>Conforming user agents</em> [add ref]
    must apply a "default style sheet" (or behave as if they did) prior to
    all other style sheets for a document. A user agent's default style sheet
    should present the elements of the document language in ways that satisfy
    general presentation expectations for the document language (e.g., for
    visual browsers, the EM element in HTML is presented using an italic
    font). See "Appendix D. Default style sheet for HTML 4" <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> for a recommended default
    style sheet for HTML 4.0 documents.
  </ul>

  <p>Each CSS declaration can have two levels of importance: normal (which is
   default) and important (which must be marked). The CSS3 syntax module <a
   href="#CSS3SYN" rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> describes
   how declarations are marked as important.

  <p>The weight of style sheets from the various origins, in ascending order,
   is:

  <ol>
   <li>User agent style sheets

   <li>User normal style sheets

   <li>Author normal style sheets

   <li>Author important style sheets

   <li>User important style sheets
  </ol>

  <p>By default, this strategy gives author declarations more weight than
   those of the user. It is therefore important that the UA give the user the
   ability to turn off the influence of a certain style sheet, e.g., through
   a pull-down menu.

  <p>Declarations in imported style sheets have lower weight than
   declarations in the style sheet from where they are imported. Imported
   style sheets can themselves import and override other style sheets,
   recursively, and the same precedence declarations apply.

  <p>If the user agent chooses to honor presentational hints from other
   sources than style sheets, these hints must be given the same weight as
   the user agent's default style sheet. This rule is intended for
   presentational hints in HTML.

  <p class=note>Note that non-CSS presentational hints had a higher weight in
   CSS2.

  <h2 id=conformance><span class=secno>10. </span>Conformance</h2>

  <p>[TBD]

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p>[acknowledgments]

  <h2 class=no-num id=references>References</h2>

  <h3 class=no-num id=normative-references>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3SYN>[CSS3SYN]

   <dd>L. David Baron. <cite>CSS3 module: Syntax.</cite> 13 August 2003. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>
    </dd>
   <!---->

   <dt id=CSS3VAL>[CSS3VAL]

   <dd>H&#229;kon Wium Lie; Chris Lilley. <cite>CSS3 module: Values and
    Units.</cite> 13 July 2001. W3C Working Draft. (Work in progress.) URL:
    <a
    href="http://www.w3.org/TR/2001/WD-css3-values-20010713">http://www.w3.org/TR/2001/WD-css3-values-20010713</a>
    </dd>
   <!---->

   <dt id=MEDIAQ>[MEDIAQ]

   <dd>H&#229;kon Wium Lie; Tantek &#199;elik; Daniel Glazman. <cite>Media
    Queries.</cite> 8 July 2002. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708">http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708</a>
    </dd>
   <!---->

   <dt id=SELECT>[SELECT]

   <dd>Daniel Glazman; et al. <cite>Selectors.</cite> 13 November 2001. W3C
    Candidate Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <cite>Cascading Style Sheets, level 2 revision
    1.</cite> 25 February 2004. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2004/CR-CSS21-20040225">http://www.w3.org/TR/2004/CR-CSS21-20040225</a>
    </dd>
   <!---->

   <dt id=HTML401>[HTML401]

   <dd>David Raggett; Arnaud Le Hors; Ian Jacobs. <cite>HTML 4.01
    Specification.</cite> 24 December 1999. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->
  <!-- <h2 class="no-num">Index</h2> -->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->