cascade.html

CSS lets learn this step by step...

<pre>
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
</pre>
</div>

<p>In the absence of any media types, the import is
unconditional. Specifying 'all' for the medium has the same effect.

<H2>6.4 <a name="cascade">The cascade</a></h2>

<P>Style sheets may have three different origins: author, user, and
user agent.</p>

<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>: <a
href="conform.html#conformance">Conforming user agents</a> must apply
a <span class="index-def" title="default style sheet"><a
name="default-style-sheet"><dfn>default style sheet</dfn></a></span>
(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 <a href="sample.html">"A sample style sheet for HTML
4.0"</a> for a recommended default style sheet for HTML 4.0 documents.

<P>Note that the default style sheet may change if system settings are
modified by the user (e.g., system colors). However, due to
limitations in a user agent's internal implementation, it may be
impossible to change the values in the default style sheet.
</ul>

<P>Style sheets from these three origins will overlap in scope, and
they interact according to the cascade.

<P>The CSS <a name="x10"><span class="index-def" title="cascade">cascade</span></a>
assigns a weight to each style rule. When several rules apply, the one
with the greatest weight takes precedence.

<P>By default, rules in author style sheets have more weight than
rules in user style sheets. Precedence is reversed, however, for
"!important" rules. All rules user and author rules have more weight
than rules in the UA's default style sheet.

<P>Imported style sheets also cascade and their weight depends on
their import order. Rules specified in a given style sheet override
rules imported from other style sheets. Imported style sheets can
themselves import and override other style sheets, recursively, and
the same precedence rules apply.

<H3>6.4.1 <a name="cascading-order">Cascading order</a></H3>

<P>To find the value for an element/property combination, user agents
must apply the following sorting order:</p>

<OL>
    <LI>
      Find all declarations that apply to the element and property in
      question, for the target <a href="media.html">media type</a>.
      Declarations apply if the associated selector <A
      HREF="selector.html">matches</A> the element in question.

    <LI>
      The primary sort of the declarations is by weight and origin:  for normal
      declarations, author style sheets override 
      user style sheets which override the default style sheet. For
      <a name="x11"><span class="index-def" title="important">"!important"</span></a>
      declarations, user style sheets override author style sheets
      which override the default style sheet.
      "!important" declaration override normal declarations.
      An imported style sheet has the same
      origin as the style sheet that imported it.

    <LI>
      The secondary sort is by <a href="#specificity">specificity</a> 
      of selector: more specific
      selectors will override more general ones.  Pseudo-elements and
      pseudo-classes are counted as normal elements and classes,
      respectively.

    <LI> Finally, sort by order specified: if two rules have the same
    weight, origin and specificity,
    the latter specified wins. Rules in imported style sheets are
    considered to be before any rules in the style sheet itself.
</OL>

<P> Apart from the "!important" setting on individual declarations,
this strategy gives author's style sheets higher weight than those of
the reader. It is therefore important that the user agent give the
user the ability to turn off the influence of a certain style sheet,
e.g., through a pull-down menu.

<H3>6.4.2 <a name="important-rules">!important rules</a></H3>

<P>CSS attempts to create a balance of power between author
and user style sheets. By default, rules in an author's style
sheet override those in a user's style sheet (see cascade
rule 3). 

<P>However, for balance, an "!important" declaration (the keywords "!"
and "important" follow the declaration) takes precedence over a normal
declaration.  Both author and user style sheets may contain
"!important" declarations, and user "!important" rules override author
"!important" rules. This CSS feature improves accessibility
of documents by giving users with special requirements (large
fonts, color combinations, etc.) control over presentation.

<div class="note"><P>
<em><strong>Note.</strong>
This is a semantic change since CSS1. In CSS1, author "!important"
rules took precedence over user "!important" rules. </em>
</div>

<P>Declaring a <a name="x12"><span class="index-inst" title="shorthand
property">shorthand property</span></a> (e.g., <a href="colors.html#propdef-background" class="noxref"><span
class="propinst-background">'background'</span></a>) to be "!important" is
equivalent to declaring all of its sub-properties to be "!important".

<div class="example"><P style="display:none">Example(s):</P> 

<P> The first rule in the user's style sheet in the following example
contains an "!important" declaration, which overrides the corresponding
declaration in the author's styles sheet.  The second declaration
will also win due to being marked "!important". However, the third
rule in the user's style sheet is not "!important" and will therefore
lose to the second rule in the author's style sheet (which happens to
set style on a shorthand property). Also, the third author rule will
lose to the second author rule since the second rule is
"!important". This shows that "!important" declarations have a
function also within author style sheets.

<PRE>
/* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* From the author's style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
</PRE>
</div>


<H3>6.4.3 <a name="specificity">Calculating a selector's specificity</a></H3>
<P>A selector's specificity is calculated as follows:</p>

<ul>
<li>count the number of ID attributes in the selector (= a)
<li>count the number of other attributes and pseudo-classes 
in the selector (= b)
<li>count the number of element names in the selector (= c)
<li>ignore pseudo-elements.
</ul>

<P>Concatenating the three numbers a-b-c (in a number system with a large
base) gives the specificity. 

<div class="example"><P style="display:none">Example(s):</P><P>
Some examples:

<PRE>
*             {}  /* a=0 b=0 c=0 -&gt; specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -&gt; specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -&gt; specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -&gt; specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -&gt; specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -&gt; specificity =  13 */ 
LI.red.level  {}  /* a=0 b=2 c=1 -&gt; specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -&gt; specificity = 100 */ 
</PRE>
</div>


<P>In HTML, values of an element's "style" attribute are style sheet
rules. These rules have no selectors, but for the purpose of step 3 of
the cascade algorithm, they are considered to have an ID selector
(specificity: a=1, b=0, c=0). For the purpose of step 4, they are
considered to be after all other rules.

<div class="html-example"><P>
<PRE>
&lt;HEAD&gt;
&lt;STYLE type="text/css"&gt;
  #x97z { color: blue }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P ID=x97z style="color: red"&gt;
&lt;/BODY&gt;
</PRE>

<P> In the above example, the color of the P element would be
red. Although the specificity is the same for both declarations, the
declaration in the "style" attribute will override the one in the
STYLE element because of cascading rule 4.
</div>

<H3><a name="q12">6.4.4 Precedence of non-CSS presentational hints</a></H3> 

<P>The UA may choose to honor presentational hints from other sources
than style sheets, for example the FONT element or the "align"
attribute in HTML. If so, the non-CSS presentational hints must be
translated to the corresponding CSS rules with specificity equal to
zero. The rules are assumed to be at the start of the author style sheet
and may be overridden by subsequent style sheet rules.

<div class="note">
<P><em><strong>Note.</strong>
In a transition phase, this policy will make it easier for
stylistic attributes to coexist with style sheets.
</em>
</div>

<div class="note">
<P><em><strong>Note.</strong>
In CSS1, the non-CSS presentational hints were given a specificity
equal to 1, not 0. The change is due to the introduction of the
universal selector, which has a specificity of 0.
</em>
</div>


<hr class="navbar">

<div class="navbar" align="center">
<p><a href="selector.html">previous</a> &nbsp;
<a href="media.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
</BODY>
</html>