csswg-drafts/css3-cascade/Overview.html at 39237abd64ef7e52c50ba078aea11503f8ca2bce · 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
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&aring;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> &copy; 2009 <a
    href="http://www.w3.org/"><acronym title="World Wide Web
    Consortium">W3C</acronym></a><sup>&reg;</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 &lsquo;<code
   class=css>initial</code>&rsquo; value and the optional title for
   &lsquo;<code class=css>@import</code>&rsquo; and &lsquo;<code class=css><a
   href="#media">@media</a></code>&rsquo;, 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="
8000
;#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 &lsquo;<code
    class=css>initial</code>&rsquo; or &lsquo;<code
    class=css>inherit</code>&rsquo;, the value of the winning declaration
    becomes the specified value.

   <li>Otherwise, if the value of the winning declaration is &lsquo;<code
    class=css>inherit</code>&rsquo;, the inherited value (see below) becomes
    the specified value.

   <li>Otherwise, if the value of the winning declaration is &lsquo;<code
    class=css>initial</code>&rsquo;, 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>&lsquo;<code class=css>@import</code>&rsquo;</dfn>
   rule allows users to import style rules from other style sheets. Any
   &lsquo;<code class=css>@import</code>&rsquo; rules must follow all
   &lsquo;<code class=css>@charset</code>&rsquo; rules and precede all other
   at-rules and rule sets in a style sheet. The &lsquo;<code
   class=css>@import</code>&rsquo; 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
    &lsquo;<code class=css>@import</code>&rsquo; syntaxes (one with
    &lsquo;<code class=css>url()</code>&rsquo; 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 &ldquo;media
   queries&rdquo; after the URI.

  <div class=example>
   <p>The following rules illustrate how &lsquo;<code
    class=css>@import</code>&rsquo; 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 &lsquo;<code class=property>all</code>&rsquo; for the medium
   has the same effect.

  <p>At the end of the &lsquo;<code class=css>@import</code>&rsquo; 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 &lsquo;<code
     class=css>@import</code>&rsquo;s without a name are imported, as well as
     the first &lsquo;<code class=css>@import</code>&rsquo; that has a name
     and all other &lsquo;<code class=css>@import</code>&rsquo;s that have
     the same name.

   <li>
    <p>If the user has chosen a style be name, then all &lsquo;<code
     class=css>@import</code>&rsquo;s without a name are imported, as well as
     all &lsquo;<code class=css>@import</code>&rsquo;s with the name chosen
     by the user.
  </ul>

  <div class=example>
   <p>If the UA is using the default style, only &ldquo;Yellow Fish&rdquo;
    and the nameless &lsquo;<code class=css>@import</code>&rsquo;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 &ldquo;Simple&rdquo; style, only
    &ldquo;Simple&rdquo; and the nameless &lsquo;<code
    class=css>@import</code>&rsquo;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 &lsquo;<code
   class=css>@import</code>&rsquo; (if any) matches the media for which the
   UA renders the document.

  <p>If an &lsquo;<code class=css>@import</code>&rsquo; is skipped, then all
   &lsquo;<code class=css>@import</code>&rsquo;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>&lt;?xml-stylesheet?&gt;</code> instructions),

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

   <li>the names of &lsquo;<code class=css><a
    href="#media">@media</a></code>&rsquo; and &lsquo;<code
    class=css>@import</code>&rsquo; rules that occur in style sheets linked
    from &lsquo;<code class=css>@import</code>&rsquo; 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 &lsquo;<code
   class=css>@import</code>&rsquo; 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 &lsquo;<code
   class=css>@import</code>&rsquo; or &lsquo;<code class=css><a
   href="#media">@media</a></code>&rsquo;. <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., &lsquo;<code class=css>@import
   url(foo.css) as "Boxed"</code>&rsquo;.

  <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
   &lsquo;<code class=css><a href="#media">@media</a></code>&rsquo; 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 &lsquo;<code class=css><a
   href="#media">@media</a></code>&rsquo; 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 &lsquo;<code class=css><a
   href="#media">@media</a></code>&rsquo; 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 &lsquo;<code class=css><a href="#media">@media</a></code>&rsquo;
   rules with a name, together with any &lsquo;<code
   class=css>@import</code>&rsquo; rules with the same name, present
   alternative style sheets. The UA must read the rules inside some
   &lsquo;<code class=css><a href="#media">@media</a></code>&rsquo; rules and
   skip others, as follows:

  <ul>
   <li>
    <p>If the user has not chosen a style by name, the UA must read all
     &lsquo;<code class=css><a href="#media">@media</a></code>&rsquo; 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 &lsquo;<code
     class=css>@import</code>&rsquo; or the first named &lsquo;<code
     class=css><a href="#media">@media</a></code>&rsquo;, whichever comes
     first.

   <li>
    <p>If the user has chosen a style by name, the UA must read all
     &lsquo;<code class=css><a href="#media">@media</a></code>&rsquo; 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.
  </ul>

  <div class=example>
   <p>If the user wants the UA to use the default style, the following
    example results in the U
D53
A reading the &ldquo;Reverse video&rdquo; style,
    the unnamed &lsquo;<code class=css><a
    href="#media">@media</a></code>&rsquo; rule and all rules that are not in
    any &lsquo;<code class=css><a href="#media">@media</a></code>&rsquo; (all
    shown in <code><b>bold</b></code>). We assume the UA uses the
    &lsquo;<code class=css>screen</code>&rsquo; 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 &ldquo;Rainbow style&rdquo; style,
    the following example results in the UA reading the &ldquo;Rainbow
    style&rdquo; &lsquo;<code class=css><a
    href="#media">@media</a></code>&rsquo; rule, the unnamed &lsquo;<code
    class=css><a href="#media">@media</a></code>&rsquo; rule and all rules
    that are not in any &lsquo;<code class=css><a
    href="#media">@media</a></code>&rsquo; (all shown in
    <code><b>bold</b></code>). We assume the UA uses the &lsquo;<code
    class=css>screen</code>&rsquo; 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 &lsquo;<code class=css>inherit</code>&rsquo;
   value which explicitly specifies that the value will be determined by
   inheritance. The &lsquo;<code class=css>inherit</code>&rsquo; 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 &lsquo;<code
   class=css>inherit</code>&rsquo; 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
   &lsquo;<code class=css>initial</code>&rsquo; 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&#229;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&#229;kon Wium Lie; Tantek &#199;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 &#199;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&#229;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>&lsquo;<code class=css>@import</code>&rsquo;, <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&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
  </table>
  <!--end-properties-->