-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathOverview.html
More file actions
851 lines (661 loc) · 32.2 KB
/
Overview.html
File metadata and controls
851 lines (661 loc) · 32.2 KB
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
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
<!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">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
<style>
table { border-collapse: collapse; border: 1px solid black }
th, td { border: 1px solid black; padding: 0.2em; text-align: left }
.issue { color: red }
</style>
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1>CSS3 module: Cascading and inheritance</h1>
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 January
2009</h2>
<dl>
<dt>This version:
<dd><a
href="http://www.w3.org/TR/2009/ED-css3-cascade-20090119">http://www.w3.org/TR/2009/ED-css3-cascade-20090119</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/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</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"
rel=license>Copyright</a> © 2009 <a
href="http://www.w3.org/"><acronym title="World Wide Web
Consortium">W3C</acronym></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
of Technology">MIT</acronym></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 to find the specified value for all
properties on all elements. Values either come from style sheets or the
property's initial value. By way of cascading and inheritance, values are
propagated to all properties on all elements.
<p>This module interfaces with several other modules. It relies on <a
href="#CSS3SYN" rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> to parse
the style sheets, on <a href="#SELECT"
rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> to calculate specificity,
and on <a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> to
determine if a declaration applies to the media. The output from this
module is a <em>specified value</em> for all element/property
combinations. The processing of specified values is described in <a
href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
<h2 class="no-num no-toc" id=status-of-this-document>Status of this
document</h2>
<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>@import</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.
<p>This draft should not be cited except as "work in progress". It is a
work item of the CSS working group and part of the <a href="/Style/">Style
activity</a>. It may be modified or dropped altogether at any point in
time. Implementations for the purpose of experimenting with the
specification are welcomed, as long as they are clearly marked as
experimental.
<p>Feedback on this draft is invited. The preferred place for discussion is
the (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a href="http://www.w3.org/Mail/Lists.html#www-style"
lang=und>www-style@w3.org</a>. W3C members can also send comments to the
CSS WG mailing list.
<p>A list of current W3C Recommendations and other technical documents
including Working Drafts and Notes can be found at <a
href="http://www.w3.org/TR/">http://www.w3.org/TR</a>.
<h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
<li><a href="#input-to-and-output-from-this-module"><span class=secno>2
</span>Input to and output from this module</a>
<li><a href="#at-import"><span class=secno>3 </span>Importing style
sheets</a>
<li><a href="#at-media-rule"><span class=secno>4 </span>Named
<code>@media</code> rules</a>
<li><a href="#cascading"><span class=secno>5 </span>Cascading</a>
<li><a href="#inheritance"><span class=secno>6 </span>Inheritance</a>
<li><a href="#initial-value"><span class=secno>7 </span>Initial value</a>
<li><a href="#computing-weight"><span class=secno>8 </span>Computing
weight</a>
<li><a href="#conformance"><span class=secno>9 </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>
<li class=no-num><a href="#index">Index</a>
<li class=no-num><a href="#property-index">Property index</a>
</ul>
<!--end-toc-->
<hr>
<h2 id=introduction><span class=secno>1 </span>Introduction</h2>
<p>One of the fundamental design principles of CSS is <em>cascading</em>,
which allows several style sheets to influence the presentation of a
document. When different declarations try to set a value for the same
element/property combination, the conflicts must somehow be resolved.
<p>The opposite problem arises when no declarations try to set a the value
for an element/property combination. In this case, a value must be found
by way of <em><a href="#inherited">inheritance</a></em> or by looking at
the property's <em><a href="#initial-value0">initial value</a></em>.
<p>The rules for finding a the specified value for all properties on all
elements is described in this specification. The rules for finding the
specified values in the page context and the margin boxes are described in
<a href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.
<h2 id=input-to-and-output-from-this-module><span class=secno>2
</span>Input to and output from this module</h2>
<p>The input to the computations described in this module is:
<ul>
<li>a set of parsed style sheets
<li>the initial value of each property
<li>the title of the preferred style sheet (if any)
</ul>
<p>The output of the computations described in this module is a specified
value for all properties on all elements.
<p>In order to find the specified values, implementations must first
identify which statements that apply to the document. This is done by:
<ol>
<li>Starting out with all author style sheets specified in the document,
as well all user and UA style sheets.
<li>Removing statements that have associated Media Queries <a
href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> that are
false in the given context.
<li>Removing @import statements that do not match the title of the
preferred style sheet, if any. This is described in <a
href="#import">Importing style sheets</a> below.
<li>Removing @media statements that do not match the title of the
preferred style sheet, if any. This is described in <a
href="#import">Named @media rules</a> below.
<li>Expanding all remaining @import rules.
</ol>
<p>Then, for every element, the value for each property can be found by
following this pseudo-algorithm:
<ol>
<li>Identify all declarations that apply to the element (as described in
<a href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>)
<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.
This is 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>3 </span>Importing style sheets</h2>
<p>The <dfn id=import>‘<code class=css>@import</code>’</dfn>
rule allows users to import style rules from other style sheets. Any
‘<code class=css>@import</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>@import</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(…) around it.
<div class=example>
<p>The following lines are equivalent in meaning and illustrate both
‘<code class=css>@import</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-imports title="conditional import|media-dependent
import">conditional imports</dfn> specify comma-separated “media
queries” after the URI.
<div class=example>
<p>The following rules illustrate how ‘<code
class=css>@import</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 ‘<code class=property>all</code>’ for the medium
has the same effect.
<p>At the end of the ‘<code class=css>@import</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-style-sheets>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>@import</code>’s without a name are imported, as well as
the first ‘<code class=css>@import</code>’ that has a name
and all other ‘<code class=css>@import</code>’s that have
the same name.
<li>
<p>If the user has chosen a style be name, then all ‘<code
class=css>@import</code>’s without a name are imported, as well as
all ‘<code class=css>@import</code>’s with the name chosen
by the user.
</ul>
<div class=example>
<p>If the UA is using the default style, only “Yellow Fish”
and the nameless ‘<code class=css>@import</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>
<div class=example>
<p>If the user has chosen the “Simple” style, only
“Simple” and the nameless ‘<code
class=css>@import</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>
<p>Style sheets are only imported if the media query on the ‘<code
class=css>@import</code>’ (if any) matches the media for which the
UA renders the document.
<p>If an ‘<code class=css>@import</code>’ is skipped, then all
‘<code class=css>@import</code>’s inside the style sheet it
points to are also skipped, no matter what their names.
<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><?xml-stylesheet?></code> instructions),
<li>the names of ‘<code class=css><a
href="#media">@media</a></code>’ and ‘<code
class=css>@import</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>@import</code>’ rules that occur in style sheets linked
from ‘<code class=css>@import</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>@import</code>’ rules.
<p class=note>HTML <a href="#HTML401"
rel=biblioentry>[HTML401]<!--{{HTML401}}--></a> uses the term <dfn
id=preferred-style-sheet>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>@import</code>’ or ‘<code class=css><a
href="#media">@media</a></code>’. <dfn
id=alternate-style-sheets>Alternate style sheets</dfn> are all other named
style sheets. Finally, HTML calls style sheets without a name <dfn
id=persistent-style-sheets>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 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>’.
<p class=issue>[Should the spec 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?]
<h2 id=at-media-rule><span class=secno>4 </span>Named <code><a
href="#media">@media</a></code> rules</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>@import</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>@import</code>’ or the first named ‘<code
class=css><a href="#media">@media</a></code>’, whichever comes
first.
<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 th
8096
e UA and (2) that either have no
name or whose name is equal to the user's chosen name.
</ul>
<div class=example>
<p>If the user wants the UA to use the default style, the following
example results in the UA reading the “Reverse video” 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>
<div class=example>
<p>If the user wants the UA to use the “Rainbow style” style,
the following example results in the UA reading the “Rainbow
style” ‘<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>
<h2 id=cascading><span class=secno>5 </span>Cascading</h2>
<p>The purpose of cascading is to find one <dfn
id=winning-declaration>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
href="#computing-weight">Computing Weight</a> 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>6 </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 is copied from the parent element's computed value for
the same property.
<p>The root element, which has no parent element, inherits the initial
value of the property. <!--
<p>The page context inherits from the initial value of the property. Margin boxes inherit from the page context.
-->
<p>Pseudo-elements inherit according to a fictional tag sequence described
for each pseudo-element <a href="#SELECT"
rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>.
<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 in the cascade, 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=initial-value><span class=secno>7 </span>Initial value</h2>
<p>Each property has an <dfn id=initial-value0>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-weight><span class=secno>8 </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>9 </span>Conformance</h2>
<p>[TBD]
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
<p>David Baron contributed to thie specification.
<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. <a
href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813"><cite>CSS3
module: Syntax.</cite></a> 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åkon Wium Lie; Chris Lilley. <a
href="http://www.w3.org/TR/2006/WD-css3-values-20060919"><cite>CSS3
Values and Units.</cite></a> 19 September 2006. W3C Working Draft. (Work
in progress.) URL: <a
href="http://www.w3.org/TR/2006/WD-css3-values-20060919">http://www.w3.org/TR/2006/WD-css3-values-20060919</a>
</dd>
<!---->
<dt id=MEDIAQ>[MEDIAQ]
<dd>Håkon Wium Lie; Tantek Çelik; Daniel Glazman. <a
href="http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606"><cite>Media
Queries.</cite></a> 6 June 2007. W3C Candidate Recommendation. (Work in
progress.) URL: <a
href="http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606">http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606</a>
</dd>
<!---->
<dt id=SELECT>[SELECT]
<dd>Daniel Glazman; Tantek Çelik; Ian Hickson. <a
href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215"><cite>Selectors.</cite></a>
15 December 2005. W3C Working Draft. (Work in progress.) URL: <a
href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215">http://www.w3.org/TR/2005/WD-css3-selectors-20051215</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. <a
href="http://www.w3.org/TR/2007/CR-CSS21-20070719"><cite>Cascading Style
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 19 July
2007. W3C Candidate Recommendation. (Work in progress.) URL: <a
href="http://www.w3.org/TR/2007/CR-CSS21-20070719">http://www.w3.org/TR/2007/CR-CSS21-20070719</a>
</dd>
<!---->
<dt id=CSS3PAGE>[CSS3PAGE]
<dd>Håkon Wium Lie; Melinda Grant. <a
href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
progress.) URL: <a
href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
</dd>
<!---->
<dt id=HTML401>[HTML401]
<dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a
href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
Specification.</cite></a> 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 id=index>Index</h2>
<!--begin-index-->
<ul class=indexlist>
<li>Alternate style sheets, <a href="#alternate-style-sheets"
title="Alternate style sheets"><strong>3</strong></a>
<li>alternative style sheets, <a href="#alternative-style-sheets"
title="alternative style sheets"><strong>3</strong></a>
<li>conditional import, <a href="#conditional-imports" title="conditional
import"><strong>3</strong></a>
<li>‘<code class=css>@import</code>’, <a href="#import"
title="'@import'"><strong>3</strong></a>
<li>inheritance, <a href="#inherited"
title=inheritance><strong>6</strong></a>
<li>initial value, <a href="#initial-value0" title="initial
value"><strong>7</strong></a>
<li>@media, <a href="#media" title="@media"><strong>4</strong></a>
<li>media-dependent import, <a href="#conditional-imports"
title="media-dependent import"><strong>3</strong></a>
<li>persistent style sheets, <a href="#persistent-style-sheets"
title="persistent style sheets"><strong>3</strong></a>
<li>preferred style sheet, <a href="#preferred-style-sheet"
title="preferred style sheet"><strong>3</strong></a>
<li>winning declaration, <a href="#winning-declaration" title="winning
declaration"><strong>5</strong></a>
</ul>
<!--end-index-->
<h2 class=no-num id=property-index>Property index</h2>
<!--begin-properties-->
<table class=proptable>
<thead>
<tr>
<th>Property
<th>Values
<th>Initial
<th>Applies to
<th>Inh.
<th>Percentages
<th>Media
<tbody>
</table>
<!--end-properties-->