-
Notifications
You must be signed in to change notification settings - Fork 641
/
Overview.bs
16448 lines (13626 loc) · 625 KB
/
Overview.bs
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
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<pre class='metadata'>
Title: CSS 2
Shortname: css2
Level:
Status: ED
Work Status: Stable
Group: csswg
ED: https://drafts.csswg.org/css2/
TR: https://www.w3.org/TR/CSS2/
Previous version: https://www.w3.org/TR/2011/REC-CSS2-20110607/
Previous version: https://www.w3.org/TR/2008/REC-CSS2-20080411/
Editor: Sam Sneddon, https://gsnedders.com
Editor: Tantek Çelik, tantek@cs.stanford.edu
Former Editor: Editor: Bert Bos, W3C, mailto:bert@w3.org, w3cid 3343
Former Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Former Editor: Ian Hickson, ian@hixie.ch
Former Editor: Håkon Wium Lie, Opera Software, howcome@opera.com
WPT Display: inline
Abstract:
This specification defines Cascading Style Sheets level 2 (CSS 2)
revision 2 (CSS 2.2). CSS is a style sheet language
that allows
authors and users to attach style (e.g., fonts and spacing) to
structured documents (e.g., HTML documents and XML
applications). By separating the presentation style of documents from
the content of documents, CSS simplifies Web authoring and
site maintenance.
It supports media-specific style sheets so that authors may tailor the
presentation of their documents to visual browsers, aural devices,
printers, braille devices, handheld devices, etc. It also supports
content positioning, table layout, features for internationalization
and some properties related to user interface.
CSS 2.2 is derived from and is intended to replace the
CSS 2.1 and CSS2 (1998)
specifications. See [[#app-changes]] for changes from CSS 2.1,
and <a href="/TR/2011/REC-CSS21-2011-06-07/changes.html">appendix C of
CSS 2.1 for changes from CSS2 (1998)</a> (noting that certain CSS2 (1998) features
were removed from CSS 2 in CSS 2.1). All future
specifications should refer to CSS 2.2 when referring to CSS
level 2; if they wish to reference features from CSS2 (1998) dropped in later
revisions they should reference the latest applicable CSS module.
Required IDs: abs-non-replaced-height, abs-non-replaced-width, absolutely-positioned,
absolute-positioning, absrel-units, abs-replaced-height, abs-replaced-width, abstract,
acknowledgements, actual-value, addressing, adjacent-selectors, algorithm, alignment-prop,
all-media-group, allowed-page-breaks, almost, ancestor, angles, anonymous,
anonymous-block-level, anonymous-boxes, applies-to, at-import, at-media-rule, at-rules,
attribute, attribute-selectors, audio-media-group, aural-intro, aural-media-group, aural-tables,
author, authoring, AutoNumber2, auto-table-layout, background, background-properties,
baseline-below, before-after-content, before-and-after, best-page-breaks, bfc-next-to-float,
bidi, bidi-box-model, bitmap-media-group, block, block-boxes, block-container-box,
block-formatting, block-level, block-replaced-width, block-root-margin, blockwidth,
border-color-properties, border-conflict-resolution, border-edge, border-properties, borders,
border-shorthand-properties, border-style-properties, border-width-properties, box-border-area,
box-content-area, box-dimensions, box-gen, box-margin-area, box-model, box-padding-area,
break-inside, canvas, caps-prop, caption-position, cascade, cascading-order, changes, characters,
charset, child, child-selectors, choose-position, clarifications, class-html, clearance,
clipping, collapsing-borders, collapsing-margins, colors, color-units, column-alignment, columns,
combinator, comment, comments, comp-abspos, comparison, comp-float, comp-normal-flow,
comp-relpos, computed-defs, computed-value, Computing_heights_and_margins,
Computing_widths_and_margins, conformance, conformance-term, containing-block,
containing-block-details, content, content-edge, content-height, content-width,
continuous-media-group, conventions, counter, counters, counter-styles, ctrlchars, cue-props,
cursive-def, cursor-props, declaration, decoration, default-attrs, default-style-sheet,
defined-to-exist, defs, descendant, descendant-selectors, design-principles, direction,
display-prop, dis-pos-flo, doc-language, doclanguage, doctree, dynamic-effects, dynamic-outlines,
dynamic-pseudo-classes, each-box, egbidiwscollapse, element, Emacspeak, empty, empty-cells,
em-width, errors, escaped-characters, escaping, ex, fantasy-def, first-child,
first-formatted-line, first-letter, first-line, first-line-pseudo, fixed-positioning,
fixed-table-layout, float-position, float-replaced-width, float-rules, floats, float-width,
flow-control, following, font-boldness, font-family-prop, font-shorthand, fonts-intro,
font-size-props, font-styling, forced, formatting-structure, frequencies, generated-text,
generic-font-families, grammar, grid-media-group, grouping, height-layout, html-tutorial,
id-selectors, ignore, illegal, illegalvalues, images-and-longdesc, img-anon-block, img-bach1,
img-bach2, img-bg-repeat, img-boxdim, img-boxdimeg, img-cell-align, img-changebar, img-clip,
img-CSStbl3, img-doctree, img-first-letter, img-first-letter2, img-float2p, img-floatclear,
img-floateg, img-flow-absolute, img-flow-abs-rel, img-flow-clear, img-flow-clear2,
img-flow-float, img-flow-generic, img-flow-relative, img-flow-static, img-frame,
img-inline-layout, img-list-inout, img-overflow1, img-overflow2, img-page-info, img-pixel1,
img-pixel2, img-table1, img-table-overlap, img-tbl-border-conflict, img-tbl-empty,
img-tbl-layers, img-tbl-spacing, img-tbl-width, important-rules, indentation-prop, informative, inheritance,
inherited-prop, initial-containing-block, initial-value, inlineblock-replaced-width,
inlineblock-width, inline-box, inline-boxes, inline-box-height, inline-formatting, inline-level,
inline-non-replaced, inline-replaced-height, inline-replaced-width, inline-width, inner-edge,
interactive-media-group, internal, internal-table-element, intrinsic, keywords, known-errors,
lang, layers, leading, length-units, line-box, line-height, lining-striking-props,
link-pseudo-classes, lists, list-style, magnification, margin-edge, margin-properties,
matching-attrs, media-applies, media-groups, media-intro, media-sheets, media-types,
message-entity, min-max-heights, min-max-widths, mixing-props, model, monospace-def,
mpb-examples, multi-font-inline-height, new, normal-block, normal-flow, normative,
notes-and-examples, numbers, organization, outer-edge, outline-focus, outlines, outside-page-box,
overflow, overflow-clipping, overlapping-example, padding-edge, padding-properties, page-area,
page-box, page-break-props, page-breaks, page-cascade, page-context, paged-media-group,
page-intro, page-margins, page-selectors, painting-order, parent, parsing-errors,
pattern-matching, pause-props, percentage-units, percentage-wrt, phantom-line-box,
positioned-element, positioning-scheme, position-props, preceding, preshint, principal-box,
processing-model, propdef-azimuth, propdef-background, propdef-background-attachment,
propdef-background-color, propdef-background-image, propdef-background-position,
propdef-background-repeat, propdef-border, propdef-border-bottom, propdef-border-bottom-color,
propdef-border-bottom-style, propdef-border-bottom-width, propdef-border-collapse,
propdef-border-color, propdef-border-left, propdef-border-left-color, propdef-border-left-style,
propdef-border-left-width, propdef-border-right, propdef-border-right-color,
propdef-border-right-style, propdef-border-right-width, propdef-border-spacing,
propdef-border-style, propdef-border-top, propdef-border-top-color, propdef-border-top-style,
propdef-border-top-width, propdef-border-width, propdef-bottom, propdef-caption-side,
propdef-clear, propdef-clip, propdef-color, propdef-content, propdef-counter-increment,
propdef-counter-reset, propdef-cue, propdef-cue-after, propdef-cue-before, propdef-cursor,
propdef-direction, propdef-display, propdef-elevation, propdef-empty-cells, propdef-float,
propdef-font, propdef-font-family, propdef-font-size, propdef-font-style, propdef-font-variant,
propdef-font-weight, propdef-height, propdef-left, propdef-letter-spacing, propdef-line-height,
propdef-list-style, propdef-list-style-image, propdef-list-style-position,
propdef-list-style-type, propdef-margin, propdef-margin-bottom, propdef-margin-left,
propdef-margin-right, propdef-margin-top, propdef-max-height, propdef-max-width,
propdef-min-height, propdef-min-width, propdef-orphans, propdef-outline, propdef-outline-color,
propdef-outline-style, propdef-outline-width, propdef-overflow, propdef-padding,
propdef-padding-bottom, propdef-padding-left, propdef-padding-right, propdef-padding-top,
propdef-page-break-after, propdef-page-break-before, propdef-page-break-inside, propdef-pause,
propdef-pause-after, propdef-pause-before, propdef-pitch, propdef-pitch-range,
propdef-play-during, propdef-position, propdef-property-name, propdef-quotes, propdef-richness,
propdef-right, propdef-speak, propdef-speak-header, propdef-speak-numeral,
propdef-speak-punctuation, propdef-speech-rate, propdef-stress, propdef-table-layout,
propdef-text-align, propdef-text-decoration, propdef-text-indent, propdef-text-transform,
propdef-top, propdef-unicode-bidi, propdef-vertical-align, propdef-visibility,
propdef-voice-family, propdef-volume, propdef-white-space, propdef-widows, propdef-width,
propdef-word-spacing, propdef-z-index, properties, property, property-defs, pseudo-classes,
pseudo-class-selectors, pseudo-elements, pseudo-element-selectors, q1.0, q10.0, q11.0, q14.0,
q15.0, q16.0, q17.0, q18.0, q19.0, q2.0, q20.0, q22.0, q23.0, q24.0, q25.0, q25.4, q26.0, q27.0,
q3.0, q4, q4.0, q5.0, q6.0, q7.0, q9.0, quotes, quotes-insert, quotes-specify, reading, relative-positioning, rendered-content,
replaced-element, root, root-height, rule-sets, run-in, sample, sans-serif-def, scanner, scope,
selector-syntax, separated-borders, serif-def, shorthand, shrink-to-fit-float, sibling,
simple-selector, small-caps, source-document, spacing-props, spatial-props, speak-headers,
speaking-props, specificity, specified-value, speech-media-group, speech-props, stacking-defs,
stacking-notes, stack-level, statements, static-media-group, static-position, status, strings,
strut, style-sheet, sTypoAscender, subject, syntax, system-colors, system-fonts,
table-border-styles, table-display, table-layers, table-layout, tables-intro, tabular-container,
tactile-media-group, TanteksColorDiagram20020613, text-css, the-canvas, the-height-property,
the-page, the-width-property, times, title, toc, tokenization, tokenizer-diffs, type-selectors,
ua, undisplayed-counters, unexpected-eof, universal-selector, unsupported-values, uri,
used-value, usedValue, user, user-agent, valid-style-sheet, value-def-absolute-size,
value-def-angle, value-def-armenian, value-def-block, value-def-bo-none, value-def-border-style,
value-def-border-width, value-def-bottom, value-def-circle, value-def-close-quote,
value-def-color, value-def-counter, value-def-dashed, value-def-decimal,
value-def-decimal-leading-zero, value-def-disc, value-def-dotted, value-def-double,
value-def-family-name, value-def-frequency, value-def-generic-family, value-def-generic-voice,
value-def-georgian, value-def-groove, value-def-hidden, value-def-identifier, value-def-inherit,
value-def-inline, value-def-inline-block, value-def-inline-table, value-def-inset,
value-def-integer, value-def-invert, value-def-left, value-def-length, value-def-list-item,
value-def-lower-greek, value-def-lower-latin, value-def-lower-roman, value-def-margin-width,
value-def-no-close-quote, value-def-no-open-quote, value-def-number, value-def-open-quote,
value-def-outset, value-def-padding-width, value-def-percentage, value-def-relative-size,
value-def-ridge, value-def-right, value-defs, value-def-shape, value-def-solid,
value-def-specific-voice, value-def-square, value-def-string, value-def-table,
value-def-table-caption, value-def-table-cell, value-def-table-column,
value-def-table-column-group, value-def-table-footer-group, value-def-table-header-group,
value-def-table-row, value-def-table-row-group, value-def-time, value-def-top,
value-def-upper-latin, value-def-upper-roman, value-def-uri, values, value-stages,
vendor-keyword-history, vendor-keywords, viewport, visibility, visual-media-group,
visual-model-intro, voice-char-props, volume-props, whitespace, white-space-model,
white-space-prop, width-constraints, width-layout, xml-tutorial, z-index
</pre>
<pre class=biblio>
{
"CSS20": {
"aliasOf": "CSS2-19980512"
}
}
</pre>
<style>
span.colorsquare { float:left; width:5em; height:3em; text-align:center; padding:1.2em 0 .8em }
span.colorname { font-weight:bold }
div.colordiagram { width:25em; height:20em; margin:1em auto; font-family:Verdana,sans-serif; font-size:12px }
div.diagramrow { height:5em }
blockquote.math {display: table}
blockquote.math p {display: table-row}
blockquote.math span {display: table-cell; padding-right: 0.3em}
blockquote.math span:first-child {text-align: right}
.egbidiwsaA,.egbidiwsbB,.egbidiwsaB,.egbidiwsbC
{ white-space:pre;font-size:80%;font-family:monospace; vertical-align:2px; margin:1px }
.egbidiwsaA { background:lime;padding:2px; }
.egbidiwsbB { border:2px solid blue }
.egbidiwsaB { background:yellow;border:2px dotted white }
.egbidiwsbC { border:2px dotted red }
pre.ascii-art {
display: table; /* shrinkwrap */
margin: 1em auto;
line-height: normal;
}
</style>
<h2 id="about"><span id="q1.0">About the CSS 2.2 Specification</span></h2>
<h3 id="css2.2-v-css2">CSS 2.2 vs CSS 2</h3>
<p>The CSS community has gained significant experience with the CSS2
specification since it became a recommendation in 1998. Errors in the
CSS2 specification [[CSS20]] have subsequently been corrected in the first
revised edition [[CSS21]] in 2011, but new errata were necessary.
<p>While many of the issues will be addressed by the upcoming CSS3
specifications, the current state of affairs hinders the
implementation and interoperability of CSS2. The CSS 2.2 specification
attempts to address this situation by:
<ul>
<li>Maintaining compatibility with those portions of CSS2 that are
widely accepted and implemented.
<li>Incorporating all published CSS2 errata.
<li>Where implementations overwhelmingly differ from the CSS2
specification, modifying the specification to be in accordance with
generally accepted practice.
<li>Removing CSS2 features which, by virtue of not having been
implemented, have been rejected by the CSS community. CSS 2.2 aims to
reflect what CSS features are reasonably widely implemented for HTML
and XML languages in general (rather than <em>only</em> for a
particular XML language, or <em>only</em> for HTML).
<li>Removing CSS2 features that will be obsoleted by CSS3, thus
encouraging adoption of the proposed CSS3 features in their place.
<li>Adding a (very) small number of <a href="#new">new
property values,</a> when implementation experience has shown that
they are needed for implementing CSS2.
</ul>
<p>Thus, while it is not the case that a CSS2 style sheet is
necessarily forwards-compatible with CSS 2.2, it is the case that a
style sheet restricting itself to CSS 2.2 features is more likely to
find a compliant user agent today and to preserve forwards
compatibility in the future. While breaking forward compatibility is
not desirable, we believe the advantages to the revisions in CSS 2.2
are worthwhile.
<p>CSS 2.2 is derived from and is intended to replace
CSS 2.1 and CSS2. Some parts of CSS2 are unchanged in
CSS 2.2, some parts have been
altered, and some parts removed. The removed portions may be used in a
future CSS3 specification. Future specs should refer to CSS 2.2
(unless they need features from CSS2 which have been dropped in
CSS 2.2, and then they should only reference CSS2 for those
features, or preferably reference such feature(s) in the respective
CSS3 Module that includes those feature(s)).
<section class="non-normative">
<h3 id="reading">Reading the specification</h3>
<p>This section is non-normative.
<p>This specification has been written with two types of readers in
mind: CSS authors and CSS implementors. We hope the specification will
provide authors with the tools they need to write efficient,
attractive, and accessible documents, without overexposing them to
CSS's implementation details. Implementors, however, should find all
they need to build <a href="#conformance">conforming user
agents</a>.
The specification begins with a general presentation of CSS and
becomes more and more technical and specific towards the end. For
quick access to information, a general table of contents,
specific tables of contents at the beginning of each section,
and an index provide easy navigation, in both the electronic
and printed versions.
<p>The specification has been written with two modes of presentation
in mind: electronic and printed. Although the two presentations will
no doubt be similar, readers will find some differences. For example,
links will not work in the printed version (obviously), and page
numbers will not appear in the electronic version. In case of a
discrepancy, the electronic version is considered the authoritative
version of the document.
</section>
<section class="non-normative">
<h3 id="organization">How the specification is organized</h3>
<p>This section is non-normative.
<p>The specification is organized into the following sections:
<dl>
<dt><strong>Section 2: An introduction to CSS 2</strong>
<dd>The introduction includes a brief tutorial on CSS 2 and
a discussion of design principles behind CSS 2.
<dt><strong>Sections 3 - 18: CSS 2 reference manual.</strong>
<dd>The bulk of the reference manual consists of the CSS 2 language
reference. This reference defines what may go into a CSS 2 style sheet
(syntax, properties, property values) and how user agents must
interpret these style sheets in order to claim <a href="#conformance">conformance</a>.
<dt><strong>Appendixes:</strong>
<dd>Appendixes contain information about <a href="#html-stylesheet">a
sample style sheet for HTML 4</a>, <a href="#app-changes">changes
from CSS 2.1</a>, <a href="#app-grammar">the grammar of CSS 2</a>,
a list of normative and informative <a href="#references">references</a>,
and two indexes: one for
<a href="#property-index">properties</a> and one
<a href="#index">general index</a>.
</dl>
</section>
<h3 id="conventions">Conventions</h3>
<h4 id="doc-language">Document language elements
and attributes</h4>
<ul>
<li>CSS property and pseudo-class names are delimited
by single quotes.
<li>CSS values are delimited by single quotes.
<li>Document language attribute names are in lowercase letters
and delimited by double quotes.
</ul>
<h4 id="property-defs">CSS property definitions</h4>
<p>Each CSS property definition begins with a summary of key
information that resembles the following:</p>
<xmp class="propdef">
Name: property-name
Value: legal values & syntax
Initial: initial value
Applies to: elements this property applies to
Inherited: whether the property is inherited
Percentages: how percentage values are interpreted
Media: which media groups the property applies to
Computed Value: how to compute the computed value
</xmp>
<h5 id="value-defs">Value</h5>
<p>This part specifies the set of valid values for the property whose
name is 'property-name'. A property
value can have one or more components. Component value types are designated
in several ways:
<ol>
<li> <span id="syndata.html#keywords">keyword</span> values (e.g., auto,
disc, etc.)
<li> basic data types, which appear between "<" and ">" (e.g.,
<<length>>, <<percentage>>, etc.). In the electronic version
of the document, each instance of a basic data type links to its
definition.
<li> types that have the same range of values as a property bearing
the same name (e.g., <'border-width'>
<'background-attachment'>, etc.). In this case, the type name
is the property name (complete with quotes) between "<" and ">"
(e.g., <'border-width'>). Such a type does <strong>not</strong>
include the value ''inherit''. In the electronic version of the
document, each instance of this type of non-terminal links to the
corresponding property definition.
<li> non-terminals that do not share the same name as a property. In this
case, the non-terminal name appears between "<" and ">", as in
<border-width>. Notice the distinction between
<border-width> and <'border-width'>; the latter is defined
in terms of the former. The definition of a non-terminal is located
near its first appearance in the specification. In the electronic
version of the document, each instance of this type of value links to
the corresponding value definition.
</ol>
<p>Other words in these definitions are keywords that must appear
literally, without quotes (e.g., red). The slash (/) and the comma (<dfn data-dfn-type="grammar" data-export="" id="comb-comma">,</dfn>)
must also appear literally.
<p>Component values may be arranged into property values as follows:</p>
<ul>
<li>Several juxtaposed words mean that all of them must occur, in the
given order.
<li>A bar (<dfn data-dfn-type="grammar" data-export="" id="comb-one">|</dfn>) separates two or more alternatives:
exactly one of them must occur.
<li>A double bar (<dfn data-dfn-type="grammar" data-export="" id="comb-any">||</dfn>) separates
two or more options: one or more of them must occur, in any order.
<li>A double ampersand (<dfn data-dfn-type="grammar" data-export="" id="comb-all">&&</dfn>) separates two or more components, all of which
must occur, in any order.
<li>Brackets ([ ]) are for grouping.
</ul>
<p>Juxtaposition is stronger than the double ampersand, the double
ampersand is stronger than the double bar, and the double bar
is stronger than the bar. Thus, the following lines are equivalent:
<pre>
a b | c || d && e f
[ a b ] | [ c || [ d && [ e f ]]]
</pre>
<p> Every type, keyword, or bracketed group may be followed by one of
the following modifiers:</p>
<ul>
<li>
An asterisk (<dfn data-dfn-type="grammar" data-export="" id="mult-zero-plus">*</dfn>) indicates that the preceding type, word, or group
occurs zero or more times.
<li>
A plus (<dfn data-dfn-type="grammar" data-export="" id="mult-one-plus">+<a class="self-link" href="#mult-one-plus"></a></dfn>) indicates that the preceding type, word, or group
occurs one or more times.
<li>
A question mark (<dfn data-dfn-type="grammar" data-export="" id="mult-opt">?</dfn>) indicates that the preceding type, word, or
group is optional.
<li>
A pair of numbers in curly braces (<dfn data-dfn-type="grammar" data-export="" id="mult-num-range">{<var>A</var>,<var>B</var>}<a class="self-link" href="#mult-num-range"></a></dfn>) indicates that the
preceding type, word, or group occurs at least <var>A</var> and at most
<var>B</var> times.
</ul>
<p>The following examples illustrate different value types:
<blockquote><p>
<em>Value:</em> N | NW | NE<br>
<em>Value:</em> [ <<length>> | thick | thin ]{1,4}<br>
<em>Value:</em> [<family-name> , ]* <family-name><br>
<em>Value:</em> <<uri>>? <color> [ / <color> ]?<br>
<em>Value:</em> <<uri>> || <color><br>
<em>Value:</em> inset? && [ <<length>>{2,4} && <color>? ]
</blockquote>
<p>Component values are specified in terms of tokens, as described in <a href="#scanner">Appendix G.2</a>. As the grammar allows spaces
between tokens in the components of the <code>expr</code> production,
spaces may appear between tokens in property values.
<p class="note">Note: In many cases, spaces will in fact be
<em>required</em> between tokens in order to distinguish them from
each other. For example, the value ''1em2em'' would be parsed as a
single <code>DIMEN</code> token with the number ''1'' and the identifier
''em2em'', which is an invalid unit. In this case, a space would be
required before the ''2'' to get this parsed as the two lengths ''1em''
and ''2em''.
<h5 id="initial-value">Initial</h5>
<p>This part specifies the property's initial value. Please consult
the section on <a href="#assigning">the cascade</a> for information
about the interaction between style sheet-specified, inherited, and
initial property values.
<h5 id="applies-to">Applies to</h5>
<p>This part lists the elements to which the property applies. All
elements are considered to have all properties, but some properties
have no rendering effect on some types of elements. For example, the 'clear' property only affects block-level elements.
<h5 id="inherited-prop">Inherited</h5>
<p>This part indicates whether the value of the property is inherited
from an ancestor element. Please consult the section on <a href="#assigning">the cascade</a> for information about the
interaction between style sheet-specified, inherited, and initial
property values.
<h5 id="percentage-wrt">Percentage values</h5>
<p>This part indicates how percentages should be interpreted, if they occur in
the value of the property. If "N/A" appears here, it means that the
property does not accept percentages in its values.
<h5 id="media-applies">Media groups</h5>
<p>This part indicates the <a href="#media-groups">media
groups</a> to which the property applies. Information about media
groups is non-normative.
<h5 id="computed-defs">Computed value</h5>
<p>This part describes the computed value for the property. See the
section on <a href="#computed-value">computed values</a>
for how this definition is used.
<h4 id="shorthand">Shorthand properties</h4>
<p>Some properties are <dfn>shorthand properties</dfn>, meaning that they allow
authors to specify the values of several properties with a single
property.
<p>For instance, the 'font' property
is a shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family' all at once.</p>
<p>When values are omitted from a shorthand form, each
"missing" property is assigned
its initial value (see the section on <a href="#assigning">the
cascade</a>).
<div class="example"><p>
The multiple style rules of this example:</p>
<pre class="lang-css">
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}
</pre>
<p>may be rewritten with a single shorthand property:</p>
<pre class="lang-css">
h1 { font: bold 12pt/14pt Helvetica }
</pre>
<p>In this example, 'font-variant', and 'font-style'
take their initial values.</p>
</div>
<h4 id="notes-and-examples">Notes and examples</h4>
<p>All examples that illustrate illegal usage are clearly
marked as "ILLEGAL EXAMPLE".
<p>HTML examples lacking DOCTYPE declarations are SGML Text Entities
conforming to the HTML 4.01 Strict DTD [[!HTML401]]. Other HTML examples
conform to the DTDs given in the examples.
<p>All notes are informative only.
<p>Examples and notes are <a href="#defs">marked within
the source HTML</a> for the specification and CSS user agents will
render them specially.
<h4 id="images-and-longdesc">Images and long descriptions</h4>
<p>Most images in the electronic version of this specification are
accompanied by "long descriptions" of what they represent. A link to
the long description is denoted by a "\[D]" after the image.
<p>Images and long descriptions are informative only.
<section class="non-normative">
<h3 id="acknowledgements">Acknowledgments</h3>
<p>This section is non-normative.
<p>CSS 2.2 is based on CSS2 (1998) and CSS 2.1. See the <a href="https://www.w3.org/TR/2008/REC-CSS2-20080411/about.html#q15">acknowledgments section of CSS2</a> and the <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/about.html#acknowledgements">acknowledgments section of CSS 2.1</a> for the people that
contributed to CSS2 and CSS 2.1.
<p>We would like to thank the following people who, through their
input and feedback on the www-style mailing list, have helped us with
the creation of this specification:
<span class="vcard"><span class="fn">Andrew Clover</span></span>,
<span class="vcard"><span class="fn">Bernd Mielke</span></span>,
<span class="vcard"><span class="fn">C. Bottelier</span></span>,
<span class="vcard"><span class="fn">Christian Roth</span></span>,
<span class="vcard"><span class="fn">Christoph Päper</span></span>,
<span class="vcard"><span class="fn">Claus Färber</span></span>,
<span class="vcard"><span class="fn">Coises</span></span>,
<span class="vcard"><span class="fn">Craig Saila</span></span>,
<span class="vcard"><span class="fn">Darren Ferguson</span></span>,
<span class="vcard"><span class="fn">Dylan Schiemann</span></span>,
<span class="vcard"><span class="fn">Etan Wexler</span></span>,
<span class="vcard"><span class="fn">George Lund</span></span>,
<span class="vcard"><span class="fn">James Craig</span></span>,
<span class="vcard"><span class="fn n"><span class="given-name">Jan</span>
<span class="additional-name">Eirik</span>
<span class="family-name">Olufsen</span></span></span>,
<span class="vcard"><span class="fn"><span class="given-name">Jan</span>
<span class="additional-name">Roland</span>
<span class="family-name">Eriksson</span></span></span>,
<span class="vcard"><span class="fn">Joris Huizer</span></span>,
<span class="vcard"><span class="fn">Joshua Prowse</span></span>,
<span class="vcard"><span class="fn">Kai Lahmann</span></span>,
<span class="vcard"><span class="fn">Kevin Smith</span></span>,
<span class="vcard"><span class="fn">Lachlan Cannon</span></span>,
<span class="vcard"><span class="fn">Lars Knoll</span></span>,
<span class="vcard"><span class="fn">Lauri Raittila</span></span>,
<span class="vcard"><span class="fn">Mark Gallagher</span></span>,
<span class="vcard"><span class="fn">Michael Day</span></span>,
<span class="vcard"><span class="fn">Peter Sheerin</span></span>,
<span class="vcard"><span class="fn n"><span class="given-name">Rijk</span>
<span class="family-name">van Geijtenbeek</span></span></span>,
<span class="vcard"><span class="fn">Robin Berjon</span></span>,
<span class="vcard"><span class="fn">Scott Montgomery</span></span>,
<span class="vcard"><span class="fn">Shelby Moore</span></span>,
<span class="vcard"><span class="fn">Stuart Ballard</span></span>,
<span class="vcard"><span class="fn">Tom Gilder</span></span>,
<span class="vcard"><span class="fn">Vadim Plessky</span></span>,
<span class="vcard"><span class="fn">Peter Moulder</span></span>,
<span class="vcard"><span class="fn">Anton Prowse</span></span>,
<span class="vcard"><span class="fn">Gérard Talbot</span></span>,
<span class="vcard"><span class="fn">Ingo Chao</span></span>,
<span class="vcard"><span class="fn">Bruno Fassino</span></span>,
<span class="vcard"><span class="fn">Justin Rogers</span></span>,
<span class="vcard"><span class="fn">Boris Zbarsky</span></span>,
<span class="vcard"><span class="fn">Garrett Smith</span></span>,
<span class="vcard"><span class="fn">Zack Weinberg</span></span>,
<span class="vcard"><span class="fn">Bjoern Hoehrmann</span></span>,
and the
<span class="vcard"><span class="fn org">Open eBook Publication Structure Working Group</span></span>
Editors. We would also like to thank
<span class="vcard"><span class="fn">Gary Schnabl</span></span>,
<span class="vcard"><span class="fn">Glenn Adams</span></span> and
<span class="vcard"><span class="fn">Susan Lesch</span></span>
who helped proofread earlier versions of this document.</p>
<p>In addition, we would like to extend special thanks to
<span class="vcard"><span class="fn">Elika J. Etemad</span></span>,
<span class="vcard"><span class="fn">Ada Chan</span></span> and
<span class="vcard"><span class="fn">Boris Zbarsky</span></span>
who have contributed significant time to CSS 2.1, and to
<span class="vcard"><span class="fn">Kimberly Blessing</span></span>
for help with the editing.</p>
<p>Many thanks also to the following people for their help
with the test suite:
<span class="vcard"><span class="fn">Robert Stam</span></span>,
<span class="vcard"><span class="fn">Aharon Lanin</span></span>,
<span class="vcard"><span class="fn">Alan Gresley</span></span>,
<span class="vcard"><span class="fn">Alan Harder</span></span>,
<span class="vcard"><span class="fn">Alexander Dawson</span></span>,
<span class="vcard"><span class="fn">Arron Eicholz</span></span>,
<span class="vcard"><span class="fn">Bernd Mielke</span></span>,
<span class="vcard"><span class="fn">Bert Bos</span></span>,
<span class="vcard"><span class="fn">Boris Zbarsky</span></span>,
<span class="vcard"><span class="fn">Bruno Fassino</span></span>,
<span class="vcard"><span class="fn">Daniel Schattenkirchner</span></span>,
<span class="vcard"><span class="fn">David Hammond</span></span>,
<span class="vcard"><span class="fn">David Hyatt</span></span>,
<span class="vcard"><span class="fn">Eira Monstad</span></span>,
<span class="vcard"><span class="fn">Elika J. Etemad</span></span>,
<span class="vcard"><span class="fn">Gérard Talbot</span></span>,
<span class="vcard"><span class="fn">Gabriele Romanato</span></span>,
<span class="vcard"><span class="fn">Germain Garand</span></span>,
<span class="vcard"><span class="fn">Hilbrand Edskes</span></span>,
<span class="vcard"><span class="fn">Ian Hickson</span></span>,
<span class="vcard"><span class="fn">James Hopkins</span></span>,
<span class="vcard"><span class="fn">Justin Boss</span></span>,
<span class="vcard"><span class="fn">L. David Baron</span></span>,
<span class="vcard"><span class="fn">Lachlan Hunt</span></span>,
<span class="vcard"><span class="fn">Magne Andersson</span></span>,
<span class="vcard"><span class="fn">Marc Pacheco</span></span>,
<span class="vcard"><span class="fn">Mark McKenzie-Bell</span></span>,
<span class="vcard"><span class="fn">Matt Bradley</span></span>,
<span class="vcard"><span class="fn">Melinda Grant</span></span>,
<span class="vcard"><span class="fn">Michael Turnwall</span></span>,
<span class="vcard"><span class="fn">Ray Kiddy</span></span>,
<span class="vcard"><span class="fn">Richard Ishida</span></span>,
<span class="vcard"><span class="fn">Robert O'Callahan</span></span>,
<span class="vcard"><span class="fn">Simon Montagu</span></span>,
<span class="vcard"><span class="fn">Tom Clancy</span></span>,
<span class="vcard"><span class="fn">Vasil Dinkov</span></span>,
… and all the contributors to the CSS1 test suite.
<p>Working Group members active during the development of this
specification:
<span class="vcard"><span class="fn">César Acebal</span> (<span class="org">Universidad de Oviedo</span>)</span>,
<span class="vcard"><span class="fn">Tab Atkins Jr.</span> (<span class="org">Google, Inc.</span>)</span>,
<span class="vcard"><span class="fn">L. David Baron</span> (<span class="org">Mozilla Foundation</span>)</span>,
<span class="vcard"><span class="fn">Bert Bos</span> (<span class="org">W3C/ERCIM</span>)</span>,
<span class="vcard"><span class="fn">Tantek Çelik</span> (<span class="org">W3C Invited Experts</span>)</span>,
<span class="vcard"><span class="fn">Cathy Chan</span> (<span class="org">Nokia</span>)</span>,
<span class="vcard"><span class="fn">Giorgi Chavchanidze</span> (<span class="org">Opera Software</span>)</span>,
<span class="vcard"><span class="fn">John Daggett</span> (<span class="org">Mozilla Foundation</span>)</span>,
<span class="vcard"><span class="fn">Beth Dakin</span> (<span class="org">Apple, Inc.</span>)</span>,
<span class="vcard"><span class="fn">Arron Eicholz</span> (<span class="org">Microsoft Corp.</span>)</span>,
<span class="vcard"><span class="fn">Elika J. Etemad</span> (<span class="org">W3C Invited Experts</span>)</span>,
<span class="vcard"><span class="fn">Simon Fraser</span> (<span class="org">Apple, Inc.</span>)</span>,
<span class="vcard"><span class="fn">Sylvain Galineau</span> (<span class="org">Microsoft Corp.</span>)</span>,
<span class="vcard"><span class="fn">Daniel Glazman</span> (<span class="org">Disruptive Innovations</span>)</span>,
<span class="vcard"><span class="fn">Molly Holzschlag</span> (<span class="org">Opera Software</span>)</span>,
<span class="vcard"><span class="fn">David Hyatt</span> (<span class="org">Apple, Inc.</span>)</span>,
<span class="vcard"><span class="fn">Richard Ishida</span> (<span class="org">W3C/ERCIM</span>)</span>,
<span class="vcard"><span class="fn">John Jansen</span> (<span class="org">Microsoft Corp.</span>)</span>,
<span class="vcard"><span class="fn">Brad Kemper</span> (<span class="org">W3C Invited Experts</span>)</span>,
<span class="vcard"><span class="fn">Håkon Wium Lie</span> (<span class="org">Opera Software</span>)</span>,
<span class="vcard"><span class="fn">Chris Lilley</span> (<span class="org">W3C/ERCIM</span>)</span>,
<span class="vcard"><span class="fn">Peter Linss</span> (<span class="org">HP</span>)</span>,
<span class="vcard"><span class="fn">Markus Mielke</span> (<span class="org">Microsoft Corp.</span>)</span>,
<span class="vcard"><span class="fn">Alex Mogilevsky</span> (<span class="org">Microsoft Corp.</span>)</span>,
<span class="vcard"><span class="fn">David Singer</span> (<span class="org">Apple Inc.</span>)</span>,
<span class="vcard"><span class="fn">Anne van Kesteren</span> (<span class="org">Opera Software</span>)</span>,
<span class="vcard"><span class="fn">Steve Zilles</span> (<span class="org">Adobe Systems Inc.</span>)</span>,
<span class="vcard"><span class="fn">Ian Hickson</span> (<span class="org">Google, Inc.</span>)</span>,
<span class="vcard"><span class="fn">Melinda Grant</span> (<span class="org">HP</span>)</span>,
<span class="vcard"><span class="fn">Øyvind Stenhaug</span> (<span class="org">Opera Software</span>)</span>,
and
<span class="vcard"><span class="fn">Paul Nelson</span> (<span class="org">Microsoft Corp.</span>)</span>.
</section>
<h2 id="intro"><span id="q2.0">Introduction to CSS 2</span> </h2>
<section class="non-normative">
<h3 id="html-tutorial">A brief CSS 2 tutorial for HTML</h3>
<p>This section is non-normative.
<p> In this tutorial, we show how easy it can be to design simple
style sheets. For this tutorial, you will need to know a little HTML
(see [[HTML401]]) and some basic desktop publishing terminology.
<p>We begin with a small HTML document:</p>
<pre class="lang-html example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</pre>
<p>To set the text color of the H1 elements to red, you can write the
following CSS rules:</p>
<pre class="example lang-css">
h1 { color: red }
</pre>
<p>A CSS rule consists of two main parts: <a href="#selector">selector</a> (''h1'') and declaration
('color: red'). In HTML, element names are case-insensitive so
''h1'' works just as well as ''H1''. The declaration has two parts:
property name ('color') and property value (''red''). While the example above tries to
influence only one of the properties needed for rendering an HTML
document, it qualifies as a style sheet on its own. Combined with
other style sheets (one fundamental feature of CSS is that style
sheets are combined), the rule will determine the final presentation of the
document.
<p> The HTML 4 specification defines how style sheet rules may be
specified for HTML documents: either within the HTML document, or via
an external style sheet. To put the style sheet into the document, use
the STYLE element:</p>
<pre class="lang-html example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
h1 { color: red }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</pre>
<p> For maximum flexibility, we recommend that authors specify
external style sheets; they may be changed without modifying the
source HTML document, and they may be shared among several
documents. To link to an external style sheet, you can use the LINK
element:</p>
<pre class="lang-html example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</pre>
<p>The LINK element specifies:</p>
<ul>
<li>the type of link: to a "stylesheet".
<li>the location of the style sheet via the "href" attribute.
<li>the type of style sheet being linked: "text/css".
</ul>
<p>To show the close relationship between a style sheet and the
structured markup, we continue to use the STYLE element in this
tutorial. Let's add more colors:
<pre class="lang-html example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
body { color: black; background: white }
h1 { color: red; background: white }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</pre>
<p>The style sheet now contains four rules: the first two set the
color and background of the BODY element (it's a good idea to set the
text color and background color together), while the last two
set the color and the background of the H1 element. Since no color
has been specified for the P element, it will inherit the color
from its parent element, namely BODY. The H1 element is also a child
element of BODY but the second rule overrides the inherited value. In
CSS there are often such conflicts between different values, and this
specification describes how to resolve them.
<p>CSS 2 has more than 90 properties, including 'color'. Let's look at some of the
others:
<pre class="example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
body {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</pre>
<p>The first thing to notice is that several declarations are grouped
within a block enclosed by curly braces ({...}), and separated by
semicolons, though the last declaration may also be followed by a
semicolon.
<p>The first declaration on the BODY element sets the font family to
"Gill Sans". If that font is not available, the user agent (often
referred to as a "browser") will use the ''sans-serif'' font family
which is one of five generic font families which all users agents
know. Child elements of BODY will inherit the value of the 'font-family' property.
<p>The second declaration sets the font size of the BODY element to
12 points. The "point" unit is commonly used in print-based typography
to indicate font sizes and other length values. It's an example of an
absolute unit which does not scale relative to the environment.
<p>The third declaration uses a relative unit which scales with regard
to its surroundings. The "em" unit refers to the font size of the
element. In this case the result is that the margins around the BODY
element are three times wider than the font size.
</section>
<section class="non-normative">
<h3 id="xml-tutorial">A brief CSS 2 tutorial for XML</h3>
<p>This section is non-normative.
<p>CSS can be used with any structured document format, for example
with applications of the eXtensible Markup Language [[XML10]]. In
fact, XML depends more on style sheets than HTML, since authors can
make up their own elements that user agents do not know how to
display.
<p>Here is a simple XML fragment:
<pre class="lang-xml example">
<ARTICLE>
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was getting his
<INSTRUMENT>flute</INSTRUMENT> ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
</PARA>
</ARTICLE>
</pre>
<p>To display this fragment in a document-like fashion, we must first
declare which elements are inline-level (i.e., do not cause line breaks) and
which are block-level (i.e., cause line breaks).
<pre class="example lang-css">
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
</pre>
<p>The first rule declares INSTRUMENT to be inline and the second
rule, with its comma-separated list of selectors, declares all the
other elements to be block-level. Element names in XML are
case-sensitive, so a selector written in lowercase (e.g., ''instrument'')
is different from uppercase (e.g., ''INSTRUMENT'').
<p>One way of linking a style sheet to an XML document is to use
a processing instruction:
<pre class="lang-xml example">
<?xml-stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was getting his
<INSTRUMENT>flute</INSTRUMENT> ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
</PARA>
</ARTICLE>
</pre>
<p>A visual user agent could format the above example as:
<div class="figure">
<p><img src="images/bach1.png" alt="Example rendering" id="img-bach1">
</div>
<p>Notice that the word "flute" remains within the paragraph since it
is the content of the inline element INSTRUMENT.
<p>Still, the text is not formatted the way you would expect. For
example, the headline font size should be larger than then the rest of
the text, and you may want to display the author's name in italic:</p>
<pre class="example lang-css">
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
</pre>
<p>A visual user agent could format the above example as:
<div class="figure">
<p><img src="images/bach2.png" alt="Example rendering" id="img-bach2">
</div>
<p>Adding more rules to the style sheet will allow you to further
describe the presentation of the document.
</section>
<h3 id="processing-model">The CSS 2 processing model</h3>
<p>This section up to but not including its subsections is
non-normative.
<div class="non-normative">
<p>This section presents one possible model of how user
agents that support CSS work. This is only a conceptual model; real
implementations may vary.
<p>In this model, a user agent processes a source
by going through the following steps:</p>
<ol>
<li>Parse the source document and create a <a href="#doctree">document tree</a>.</li>
<li>Identify the target <a href="#media">media type</a>.
<li>Retrieve all style sheets associated with the document that are
specified for the target <a href="#media">media type</a>.
<li>Annotate every element of the document tree by assigning a single
value to every <a href="#properties">property</a> that is
applicable to the target <a href="#media">media type</a>.
Properties are assigned values according to the mechanisms described
in the section on <a href="#assigning">cascading and
inheritance</a>.
<p>Part of the calculation of values depends on the formatting
algorithm appropriate for the target <a href="#media">media
type</a>. For example, if the target medium is the screen, user agents
apply the <a href="#visuren">visual formatting model</a>.
<li>From the annotated document tree, generate a