csswg-drafts/css2/cascade.src at a40cc07bca0cfef78bec532c2aa9e171b75a7b37 · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: cascade.src,v 1.25 1997-12-27 00:24:07 ijacobs Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Assigning property values, Cascading, and Inheritance</TITLE>
<LINK rel="next" href="media.html">
<LINK rel="previous" href="selector.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">Assigning property values, Cascading, and Inheritance</H1>

<H2>Specified, computed, and absolute values</h2>
<P>Once a user agent has parsed a document and constructed a <a
href="convent.html#doctree">document tree</a>, it must assign, for
every node in the tree, a value to every property that applies to the
target <a href="media.html">media type</a>.

<P>The final value of a property is the result of a three-step
calculation: the value is determined through specification (the
"specified value"), then resolved into an absolute value if necessary
(the "computed value"), and finally transformed according to
the limitations of the local environment (the "actual value") if
necessary.

<h3><a name="specified-value">Specified values</a></h3>

<P>User agents must first assign a <span class="index-def"
title="specified value">specified value</span> to a property
based on the following mechanisms (in order of precedence):

<ol>
<li>If the <a href="#cascade">cascade</a> results in a value,
use it.

<li>Otherwise, if the value is <a href="#inheritance">inherited</a>,
use it.

<li>Otherwise use the property's <span class="index-def"
title="initial value"> initial value</span>. The <a
name="initial-value">initial value</a> of each property is indicated
in the property's definition.
<li>
</ol>

<h3><a name="computed-value">Computed values</a></h3>

<P>Specified values may be "absolute" (e.g., the color value 'red' or
the constant value 'hidden') or "relative" (e.g., the variable value
'auto', the font-related value 'em', pixel values, percentage values,
etc.).  Each value must be transformed into a <span class="index-def"
title="computed value">computed value</span> value according to
algorithms described in this specification.

<P>When the root of the document tree has a property whose specified
value is inherited and has relative units, the computed value is the
percentage times the property's initial value.

<div class="example"><P>
For example, with an HTML document and the following style sheet:
<pre>
HTML {font-size: 120%}
</pre>

<p>the computed value for <span
class="prop-inst-font-size">'font-size'</span> will be 120% of the
initial value of the <span
class="propinst-font-size">'font-size'</span> property. The initial
value of <span class="propinst-font-size">'font-size'</span> is
defined to be 'medium', so the actual value is 20% larger than
'medium'. The actual value that this results in depends on
the current environment.
</div>

<h3><a name="actual-value">Actual values</a></h3>

<P>A computed value has an absolute meaning but a user agent may not
be able to respect this meaning in a given environment. For example, a
user agent may not have a specified font size available, in which case
the user agent must approximate the computed value. Computed values
that are transformed to match the current environment are called <span
class="index-def" title="actual value">actual values</span>.

<P>Only actual values are inherited.

<H2><a name="inheritance">Inheritance</a></h2>

<P>Some <a href="#actual-value">actual values</a> are <span
class="index-def" title="inheritance of property
values">inherited</span> by the descendants of a node in the <a
href="convent.html#doctree">document tree</a>. Each property
definition specifies whether its value may be inherited.

<div class="example"><P>
Suppose there is an H1 element with an emphasized element inside:

<PRE>
  &lt;H1&gt;The headline &lt;EM&gt;is&lt;/EM&gt; important!&lt;/H1&gt;
</PRE>

<P>If no color has been assigned to the EM element, the emphasized
"is" will inherit the color of the parent element, so if H1 has the
color blue, the EM element will likewise be in blue.
</div>

<!--
<P>Other style properties are likewise inherited, e.g., <span
class="propinst-font-family">'font-family'</span> and <span
class="propinst-font-size">'font-size'</span>.
-->

<P>The root of the document tree cannot inherit values.

<P> To set a "default" style property for a document, authors may set
the property on the root of the document tree. In HTML, for example,
the HTML or BODY elements can serve this function. Note that this will
work even if the author omits the BODY tag in the HTML source since
the HTML parser will infer the missing tag.

<div class="example"><P>

For example, these rules cause the <span
class="propinst-color">'color'</span> property on the BODY element to
be inherited by all descendants of the BODY element:

<PRE>
  BODY {
    color: black;
    background: url(texture.gif) white;
  }
</PRE>

<P> In this example, all descendants of the BODY element inherit the
<span class="propinst-color">'color'</span> property.
</div>

<P>Not all style properties are inherited. For example, the <span
class="propinst-background">'background'</span> property is not
inherited. (However, due to the initial value of 'transparent' on the
<span class="propinst-background">'background'</span> property, the
parent's background shines through.)

<div class="example"><P>
The following example illustrates that <a href="#specified-value">
specified</a> percentage values are not inherited; only
<a href="#actual-value">actual values</a> are inherited. Consider
the style sheet:

<pre>
BODY {font-size: 10pt}
H1 {font-size: 120%}
</pre>

<p>and the document fragment:

<pre>
&lt;BODY&gt;
&lt;H1&gt;A &lt;EM&gt;large&lt;/EM&gt; heading&lt;/H1&gt;
...
</pre>

<p>The <a href="#computed-value">computed value</a> of the <span
class="prop-inst-font-size">'font-size'</span> property for the H1
element is 12pt (120% times 10pt). If the user agent has the
appropriate 12pt font available, 12pt will also be the property's <a
href="#actual-value">actual value</a> and the EM will inherit that
value for the <span class="propinst-font-size">'font-size'</span>
property. However, if the user agent does not have the 12pt font
available, it may assign an actual value of, for example, 11pt to the
<span class="propinst-font-size">'font-size'</span> property of the H1
element. In that case, the EM will inherit a value of 11pt for the
same property.
</div>

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

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

<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 document.  The user agent may provide an interface
that "generates" a user style sheet (or must behave as if it did).

<li><strong>User agent</strong>: <a
href="convent.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 default style sheet may change if system settings are
modified by the user (e.g., system colors). However, due to
limitations in a user agents' 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 <span class="index-def" title="cascade">cascade</span>
assigns a weight to each style rule. When several rules apply, the one
with the greatest weight takes precedence.

<P>By default, rules in a user's personal style sheets have less
weight than rules in the author's style sheets. Thus, if there are
conflicts between the style sheets of an incoming document and the
reader's personal sheets, the author's rules will be used. Both reader
and author rules override 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><a name="cascading-order">Cascading order</a></H3>

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

<OL>
    <LI>
      Find all declarations that apply to the element/property in
      question.  Declarations apply if the associated selector
      <A HREF="selector.html">matches</A> the
      element in question. If no declarations apply, terminate
      the algorithm.

    <LI>
      Sort the declarations by explicit weight: declarations marked
      <span class="index-inst" title="'important'">'!important'</span>
      carry more weight than unmarked (normal) declarations. See the
      section on <a href="#important-rules">'important'</a> rules for
      more information.

    <LI>
      Sort by origin: the author's style sheets override the reader's
      style sheet which override the UA's default values. An imported
      style sheet has the same origin as the style sheet from which it
      is imported.

    <LI>
      Sort by specificity of selector: more specific selectors will
      override more general ones. The definition and calculation of
      specificity is object-language dependent. Pseudo-elements and
      pseudo-classes are counted as normal elements and classes,
      respectively.

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

<P>The search for the property value must be terminated when any of
the above steps yields a rule that has a higher weight than the other
rules that apply to the same element/property combination.

<P> This strategy gives author's style sheets considerably higher
weight than those of the reader. It is therefore important that the
User agent gives the user the ability to turn off the influence of a
certain style sheet, e.g., through a pull-down menu.

<H3><a name="important-rules">'Important' rules</a></H3>

<P> Style sheet designers can increase the weights of their
declarations by declaring them <span class="index-def"
title="'important'">'important'</span>.

<div class="example"><P>
<PRE>
  H1 { color: black ! important; background: white ! important }
  P  { font-size: 12pt ! important; font-variant: italic }
</PRE>
</div>

<P> In the example above, the first three declarations have increased
weight, while the last declaration has normal weight.

<P> A reader rule with an important declaration will override an
author rule with a normal declaration. An author rule with an
important declaration will override a reader rule with an important
declaration.

<P>Declaring a shorthand property (e.g., <span
class="propinst-background">'background'</span>) to be important
is equivalent to declaring all of its sub-properties important.

<H3>Cascading order in HTML</H3>
In HTML, a selector's specificity is calculated as follows:

<ul>
<li>(a) count the number of "id" attributes in the selector
<li>(b) count the number of other attributes in the selector
(including class attributes)
<li>(c) count the number of element names in the selector
</ul>

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

<div class="example"><P>
Some examples:

<PRE>
  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> A declaration in the "style" attribute of an element has the same
weight as a declaration with an "id"-based selector that is specified
at the end of the style sheet:

<div class="example"><P>
<PRE>
&lt;STYLE type="text/css"&gt;
  #x97z { color: blue }
&lt;/STYLE&gt;

&lt;P ID=x97z style="color: red"&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 number 5.
</div>

<H3>Precedence of non-CSS presentational hints</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
1. 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>

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