One evening, just as he was getting his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
About Global Documents
Global Documents provides you with documents from around the globe on a variety of topics for your enjoyment.
Global Documents utilizes edocr for all its document needs due to edocr's wonderful content features. Thousands of professionals and businesses around the globe publish marketing, sales, operations, customer service and financial documents making it easier for prospects and customers to find content.
Tag Cloud
REC-CSS2-19980512
Cascading Style Sheets, level 2
CSS2 Specification
W3C Recommendation 12-May-1998
This version:
http://www.w3.org/TR/1998/REC-CSS2-19980512
Latest version:
http://www.w3.org/TR/REC-CSS2
Previous version:
http://www.w3.org/TR/1998/PR-CSS2-19980324
Editors:
Bert Bos
Håkon Wium Lie
Chris Lilley
Ian Jacobs
Abstract
This specification defines Cascading Style Sheets, level 2 (CSS2). CSS2 is a
style sheet language that allows authors and users to attach style (e.g., fonts,
spacing, and aural cues) to structured documents (e.g., HTML documents and
XML applications). By separating the presentation style of documents from the
content of documents, CSS2 simplifies Web authoring and site maintenance.
CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid
CSS1 style sheets are valid CSS2 style sheets. CSS2 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.
This specification also supports content positioning, downloadable fonts, table
layout, features for internationalization, automatic counters and numbering, and
some properties related to user interface.
Status of this document
This document has been reviewed by W3C Members and other interested parties
and has been endorsed by the Director as a W3C Recommendation. It is a stable
document and may be used as reference material or cited as a normative refer-
ence from another document. W3C’s role in making the Recommendation is to
draw attention to the specification and to promote its widespread deployment.
This enhances the functionality and interoperability of the Web.
1
A list of current W3C Recommendations and other technical documents can be
found at http://www.w3.org/TR.
Public discussion of CSS features takes place on www-style@w3.org.
Available formats
The CSS2 specification is available in the following formats:
HTML:
http://www.w3.org/TR/1998/REC-CSS2-19980512
a plain text file:
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt,
HTML as a gzip’ed tar file:
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz,
HTML as a zip file (this is a ’.zip’ file not an ’.exe’):
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip,
as well as a gzip’ed PostScript file:
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz,
and a PDF file:
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf.
In case of a discrepancy between the various forms of the specification,
http://www.w3.org/TR/1998/REC-CSS2-19980512 is considered the definitive
version.
Available languages
The English version of this specification is the only normative version. However,
for translations in other languages see
http://www.w3.org/Style/css2-updates/translations.html.
Errata
The list of known errors in this specification is available at
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html. Please
report errors in this document to css2-editors@w3.org.
2
Quick Table of Contents
.
.
.
.
.
.
.
.
.
.
.
13
1 About the CSS2 Specification
.
.
.
.
.
.
.
.
.
.
.
.
.
21
2 Introduction to CSS2
.
.
.
.
.
29
3 Conformance: Requirements and Recommendations
.
.
.
.
.
.
.
.
.
.
35
4 CSS2 syntax and basic data types
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
53
5 Selectors
.
.
.
.
.
69
6 Assigning property values, Cascading, and Inheritance
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
77
7 Media types
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
81
8 Box model
.
.
.
.
.
.
.
.
.
.
.
.
95
9 Visual formatting model
.
.
.
.
.
.
.
.
.
.
131
10 Visual formatting model details
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
145
11 Visual effects
.
.
.
.
.
153
12 Generated content, automatic numbering, and lists
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
175
13 Paged media
.
.
.
.
.
.
.
.
.
.
.
.
187
14 Colors and Backgrounds
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
195
15 Fonts
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
237
16 Text
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
245
17 Tables
.
.
.
.
.
.
.
.
.
.
.
.
.
.
271
18 User interface
.
.
.
.
.
.
.
.
.
.
.
.
.
.
277
19 Aural style sheets
.
.
.
.
.
.
.
291
Appendix A. A sample style sheet for HTML 4.0
.
.
.
.
.
.
.
.
.
.
293
Appendix B. Changes from CSS1
.
.
.
.
295
Appendix C. Implementation and performance notes for fonts
.
.
.
.
.
.
.
.
.
.
309
Appendix D. The grammar of CSS2
.
.
.
.
.
.
.
.
.
.
.
.
.
313
Appendix E. References
.
.
.
.
.
.
.
.
.
.
.
.
317
Appendix F. Property index
.
.
.
.
.
.
.
.
.
.
.
323
Appendix G. Descriptor index
.
.
.
.
.
.
.
.
.
.
.
.
.
.
325
Appendix H. Index
3
Full Table of Contents
.
.
.
.
.
.
.
.
.
.
.
13
1 About the CSS2 Specification
.
.
.
.
.
.
.
.
.
.
13
1.1 Reading the specification
.
.
.
.
.
.
.
.
13
1.2 How the specification is organized
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
1.3 Conventions
.
.
.
.
14
1.3.1 Document language elements and attributes
.
.
.
.
.
.
.
.
.
14
1.3.2 CSS property definitions
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
Value
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Initial
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Applies to
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Inherited
.
.
.
.
.
.
.
.
.
.
.
16
Percentage values
.
.
.
.
.
.
.
.
.
.
.
.
16
Media groups
.
.
.
.
.
.
.
.
.
.
16
1.3.3 Shorthand properties
.
.
.
.
.
.
.
.
.
.
17
1.3.4 Notes and examples
.
.
.
.
.
.
.
.
17
1.3.5 Images and long descriptions
.
.
.
.
.
.
.
.
.
.
.
.
17
1.4 Acknowledgments
.
.
.
.
.
.
.
.
.
.
.
.
.
18
1.5 Copyright Notice
.
.
.
.
.
.
.
.
.
.
.
.
.
21
2 Introduction to CSS2
.
.
.
.
.
.
.
.
.
21
2.1 A brief CSS2 tutorial for HTML
.
.
.
.
.
.
.
.
.
.
23
2.2 A brief CSS2 tutorial for XML
.
.
.
.
.
.
.
.
.
.
25
2.3 The CSS2 processing model
.
.
.
.
.
.
.
.
.
.
.
.
26
2.3.1 The canvas
.
.
.
.
.
.
.
.
.
26
2.3.2 CSS2 addressing model
.
.
.
.
.
.
.
.
.
.
.
26
2.4 CSS design principles
.
.
.
.
.
29
3 Conformance: Requirements and Recommendations
.
.
.
.
.
.
.
.
.
.
.
.
.
.
29
3.1 Definitions
.
.
.
.
.
.
.
.
.
.
.
.
.
32
3.2 Conformance
.
.
.
.
.
.
.
.
.
.
.
.
.
32
3.3 Error conditions
.
.
.
.
.
.
.
.
.
.
33
3.4 The text/css content type
.
.
.
.
.
.
.
.
.
.
35
4 CSS2 syntax and basic data types
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
35
4.1 Syntax
.
.
.
.
.
.
.
.
.
.
.
.
35
4.1.1 Tokenization
.
.
.
.
.
.
.
.
.
.
.
.
.
38
4.1.2 Keywords
.
.
.
.
.
.
.
.
.
.
38
4.1.3 Characters and case
.
.
.
.
.
.
.
.
.
.
.
.
39
4.1.4 Statements
.
.
.
.
.
.
.
.
.
.
.
.
.
39
4.1.5 At-rules
.
.
.
.
.
.
.
.
.
.
.
.
.
40
4.1.6 Blocks
.
.
.
.
40
4.1.7 Rule sets, declaration blocks, and selectors
.
.
.
.
.
.
.
.
41
4.1.8 Declarations and properties
.
.
.
.
.
.
.
.
.
.
.
.
42
4.1.9 Comments
.
.
.
.
.
.
.
.
.
42
4.2 Rules for handling parsing errors
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
43
4.3 Values
.
.
.
.
.
.
.
.
.
43
4.3.1 Integers and real numbers
.
.
.
.
.
.
.
.
.
.
.
.
.
43
4.3.2 Lengths
.
.
.
.
.
.
.
.
.
.
.
.
46
4.3.3 Percentages
4
.
.
.
.
.
.
.
.
.
.
.
46
4.3.4 URL + URN = URI
.
.
.
.
.
.
.
.
.
.
.
.
.
47
4.3.5 Counters
.
.
.
.
.
.
.
.
.
.
.
.
.
48
4.3.6 Colors
.
.
.
.
.
.
.
.
.
.
.
.
.
49
4.3.7 Angles
.
.
.
.
.
.
.
.
.
.
.
.
.
.
49
4.3.8 Times
.
.
.
.
.
.
.
.
.
.
.
.
50
4.3.9 Frequencies
.
.
.
.
.
.
.
.
.
.
.
.
.
50
4.3.10 Strings
.
.
.
.
.
.
.
.
.
50
4.4 CSS document representation
4.4.1 Referring to characters not represented in a character encod-
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
51
ing
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
53
5 Selectors
.
.
.
.
.
.
.
.
.
.
.
.
53
5.1 Pattern matching
.
.
.
.
.
.
.
.
.
.
.
.
.
55
5.2 Selector syntax
.
.
.
.
.
.
.
.
.
.
.
.
.
55
5.2.1 Grouping
.
.
.
.
.
.
.
.
.
.
.
.
55
5.3 Universal selector
.
.
.
.
.
.
.
.
.
.
.
.
.
56
5.4 Type selectors
.
.
.
.
.
.
.
.
.
.
.
56
5.5 Descendant selectors
.
.
.
.
.
.
.
.
.
.
.
.
.
57
5.6 Child selectors
.
.
.
.
.
.
.
.
.
.
57
5.7 Adjacent sibling selectors
.
.
.
.
.
.
.
.
.
.
.
.
57
5.8 Attribute selectors
.
.
.
.
.
58
5.8.1 Matching attributes and attribute values
.
.
.
.
.
.
.
59
5.8.2 Default attribute values in DTDs
.
.
.
.
.
.
.
.
.
.
.
59
5.8.3 Class selectors
.
.
.
.
.
.
.
.
.
.
.
.
.
.
60
5.9 ID selectors
.
.
.
.
.
.
.
61
5.10 Pseudo-elements and pseudo-classes
.
.
.
.
.
.
.
.
.
.
.
.
62
5.11 Pseudo-classes
.
.
.
.
.
.
.
.
.
62
5.11.1 :first-child pseudo-class
.
.
.
.
.
63
5.11.2 The link pseudo-classes: :link and :visited
.63
5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
.
.
.
.
.
.
65
5.11.4 The language pseudo-class: :lang
.
.
.
.
.
.
.
.
.
.
.
.
65
5.12 Pseudo-elements
.
.
.
.
.
.
.
65
5.12.1 The :first-line pseudo-element
.
.
.
.
.
.
.
66
5.12.2 The :first-letter pseudo-element
.
.
.
.
.
68
5.12.3 The :before and :after pseudo-elements
.
.
.
.
.
69
6 Assigning property values, Cascading, and Inheritance
.
.
.
.
.
.
.
69
6.1 Specified, computed, and actual values
.
.
.
.
.
.
.
.
.
.
.
69
6.1.1 Specified values
.
.
.
.
.
.
.
.
.
.
.
70
6.1.2 Computed values
.
.
.
.
.
.
.
.
.
.
.
.
70
6.1.3 Actual values
.
.
.
.
.
.
.
.
.
.
.
.
.
.
70
6.2 Inheritance
.
.
.
.
.
.
.
.
.
.
.
71
6.2.1 The ’inherit’ value
.
.
.
.
.
.
.
.
.
.
.
.
71
6.3 The @import rule
.
.
.
.
.
.
.
.
.
.
.
.
.
72
6.4 The cascade
.
.
.
.
.
.
.
.
.
.
.
73
6.4.1 Cascading order
.
.
.
.
.
.
.
.
.
.
.
73
6.4.2 !important rules
.
.
.
.
.
.
.
74
6.4.3 Calculating a selector’s specificity
.
.
.
.
74
6.4.4 Precedence of non-CSS presentational hints
5
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
77
7 Media types
.
.
.
.
.
.
.
.
.
.
77
7.1 Introduction to media types
.
.
.
.
.
.
.
77
7.2 Specifying media-dependent style sheets
.
.
.
.
.
.
.
.
.
.
.
78
7.2.1 The @media rule
.
.
.
.
.
.
.
.
.
.
.
78
7.3 Recognized media types
.
.
.
.
.
.
.
.
.
.
.
.
79
7.3.1 Media groups
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
81
8 Box model
.
.
.
.
.
.
.
.
.
.
.
.
.
81
8.1 Box dimensions
.
.
.
.
.
.
83
8.2 Example of margins, padding, and borders
8.3 Margin properties: ’margin-top’, ’margin-right’, ’margin-bottom’,
.
.
.
.
.
.
.
.
.
.
.
85
’margin-left’, and ’margin’
.
.
.
.
.
.
.
.
.
.
86
8.3.1 Collapsing margins
8.4 Padding properties: ’padding-top’, ’padding-right’, ’padding-bottom’,
.
.
.
.
.
.
.
.
.
.
.
87
’padding-left’, and ’padding’
.
.
.
.
.
.
.
.
.
.
.
.
88
8.5 Border properties
8.5.1 Border width: ’border-top-width’, ’border-right-width’,
.
.
88
’border-bottom-width’, ’border-left-width’, and ’border-width’
8.5.2 Border color: ’border-top-color’, ’border-right-color’,
.
.
89
’border-bottom-color’, ’border-left-color’, and ’border-color’
8.5.3 Border style: ’border-top-style’, ’border-right-style’,
.
.
90
’border-bottom-style’, ’border-left-style’, and ’border-style’
8.5.4 Border shorthand properties: ’border-top’, ’border-bottom’,
.
.
.
.
.
.
.
92
’border-right’, ’border-left’, and ’border’
.
.
.
.
.
.
.
.
.
.
.
.
95
9 Visual formatting model
.
.
.
.
.
.
95
9.1 Introduction to the visual formatting model
.
.
.
.
.
.
.
.
.
.
.
.
96
9.1.1 The viewport
.
.
.
.
.
.
.
.
.
.
.
96
9.1.2 Containing blocks
.
.
.
.
.
.
.
.
.
.
97
9.2 Controlling box generation
.
.
.
.
.
.
97
9.2.1 Block-level elements and block boxes
.
.
.
.
.
.
.
.
.
97
Anonymous block boxes
.
.
.
.
.
.
98
9.2.2 Inline-level elements and inline boxes
.
.
.
.
.
.
.
.
.
98
Anonymous inline boxes
.
.
.
.
.
.
.
.
.
.
.
99
9.2.3 Compact boxes
.
.
.
.
.
.
.
.
.
.
.
.
100
9.2.4 Run-in boxes
.
.
.
.
.
.
.
.
.
.
101
9.2.5 The ’display’ property
.
.
.
.
.
.
.
.
.
.
.
.
102
9.3 Positioning schemes
.
.
.
102
9.3.1 Choosing a positioning scheme: ’position’ property
.
.
.
.
.
.
103
9.3.2 Box offsets: ’top’, ’right’, ’bottom’, ’left’
.
.
.
.
.
.
.
.
.
.
.
.
.
.
105
9.4 Normal flow
.
.
.
.
.
.
.
.
.
105
9.4.1 Block formatting context
.
.
.
.
.
.
.
.
.
105
9.4.2 Inline formatting context
.
.
.
.
.
.
.
.
.
.
107
9.4.3 Relative positioning
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
108
9.5 Floats
.
.
.
.
.
111
9.5.1 Positioning the float: the ’float’ property
.
.
.
112
9.5.2 Controlling flow next to floats: the ’clear’ property
.
.
.
.
.
.
.
.
.
.
.
.
113
9.6 Absolute positioning
.
.
.
.
.
.
.
.
.
.
.
113
9.6.1 Fixed positioning
6
.
.
.
.
115
9.7 Relationships between ’display’, ’position’, and ’float’
.
. 115
9.8 Comparison of normal flow, floats, and absolute positioning
.
.
.
.
.
.
.
.
.
.
.
.
116
9.8.1 Normal flow
.
.
.
.
.
.
.
.
.
.
117
9.8.2 Relative positioning
.
.
.
.
.
.
.
.
.
.
.
.
118
9.8.3 Floating a box
.
.
.
.
.
.
.
.
.
.
121
9.8.4 Absolute positioning
.
.
.
.
.
.
.
.
.
.
.
125
9.9 Layered presentation
.
.
.
126
9.9.1 Specifying the stack level: the ’z-index’ property
.
. 127
9.10 Text direction: the ’direction’ and ’unicode-bidi’ properties
.
.
.
.
.
.
.
.
.
.
131
10 Visual formatting model details
.
.
.
.
.
.
.
.
.
131
10.1 Definition of "containing block"
.
.
.
.
.
.
.
.
133
10.2 Content width: the ’width’ property
.
.
.
.
.
.
.
.
.
134
10.3 Computing widths and margins
.
.
.
.
.
.
.
134
10.3.1 Inline, non-replaced elements
.
.
.
.
.
.
.
.
.
134
10.3.2 Inline, replaced elements
.
.
.
134
10.3.3 Block-level, non-replaced elements in normal flow
.
.
.
.
135
10.3.4 Block-level, replaced elements in normal flow
.
.
.
.
.
.
.
135
10.3.5 Floating, non-replaced elements
.
.
.
.
.
.
.
.
135
10.3.6 Floating, replaced elements
.
.
.
.
135
10.3.7 Absolutely positioned, non-replaced elements
.
.
.
.
.
136
10.3.8 Absolutely positioned, replaced elements
.
. 136
10.4 Minimum and maximum widths: ’min-width’ and ’max-width’
.
.
.
.
.
.
.
.
137
10.5 Content height: the ’height’ property
.
.
.
.
.
.
.
.
138
10.6 Computing heights and margins
.
.
.
.
.
.
.
139
10.6.1 Inline, non-replaced elements
10.6.2 Inline, replaced elements block-level, replaced elements in
.
.
.
.
.
.
139
normal flow, and floating, replaced elements
10.6.3 Block-level, non-replaced elements in normal flow, and float-
.
.
.
.
.
.
.
.
.
.
139
ing, non-replaced elements
.
.
.
.
139
10.6.4 Absolutely positioned, non-replaced elements
.
.
.
.
.
140
10.6.5 Absolutely positioned, replaced elements
.
140
10.7 Minimum and maximum heights: ’min-height’ and ’max-height’
10.8 Line height calculations: the ’line-height’ and ’vertical-align’ proper-
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
141
ties
.
.
.
.
.
.
.
.
.
142
10.8.1 Leading and half-leading
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
145
11 Visual effects
.
.
.
.
.
.
.
.
.
.
.
145
11.1 Overflow and clipping
.
.
.
.
.
.
.
145
11.1.1 Overflow: the ’overflow’ property
.
.
.
.
.
.
.
.
147
11.1.2 Clipping: the ’clip’ property
.
.
.
.
.
.
.
.
.
149
11.2 Visibility: the ’visibility’ property
.
.
.
.
.
153
12 Generated content, automatic numbering, and lists
.
.
.
.
.
.
.
153
12.1 The :before and :after pseudo-elements
.
.
.
.
.
.
.
.
.
.
.
155
12.2 The ’content’ property
12.3 Interaction of :before and :after with ’compact’ and ’run-in’
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
156
elements
.
.
.
.
.
.
.
.
.
.
.
.
157
12.4 Quotation marks
.
.
.
.
157
12.4.1 Specifying quotes with the ’quotes’ property
7
.
.
.
.
159
12.4.2 Inserting quotes with the ’content’ property
.
.
.
.
.
.
.
.
160
12.5 Automatic counters and numbering
.
.
.
.
.
.
.
.
162
12.5.1 Nested counters and scope
.
.
.
.
.
.
.
.
.
.
.
163
12.5.2 Counter styles
.
.
.
.
.
163
12.5.3 Counters in elements with ’display: none’
.
.
.
.
.
.
.
.
.
.
.
.
163
12.6 Markers and lists
.
.
.
.
.
.
164
12.6.1 Markers: the ’marker-offset’ property
12.6.2 Lists: the ’list-style-type’, ’list-style-image’, ’list-style-position’,
.
.
.
.
.
.
.
.
.
.
168
and ’list-style’ properties
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
175
13 Paged media
.
.
.
.
.
.
.
.
.
175
13.1 Introduction to paged media
.
.
.
.
.
.
.
.
.
176
13.2 Page boxes: the @page rule
.
.
.
.
.
.
.
.
.
.
.
176
13.2.1 Page margins
.
.
.
.
.
.
.
.
177
13.2.2 Page size: the ’size’ property
.
.
.
178
Rendering page boxes that do not fit a target sheet
.
.
.
.
.
.
178
Positioning the page box on the sheet
.
.
.
.
.
.
.
179
13.2.3 Crop marks: the ’marks’ property
.
.
.
.
.
.
.
.
179
13.2.4 Left, right, and first pages
.
.
.
.
.
.
.
.
180
13.2.5 Content outside the page box
.
.
.
.
.
.
.
.
.
.
.
.
.
180
13.3 Page breaks
13.3.1 Break before/after elements: ’page-break-before’,
.
.
.
.
.
.
.
181
’page-break-after’, ’page-break-inside’
.
.
.
.
.
.
.
.
182
13.3.2 Using named pages: ’page’
.
.
.
.
182
13.3.3 Breaks inside elements: ’orphans’, ’widows’
.
.
.
.
.
.
.
.
.
.
183
13.3.4 Allowed page breaks
.
.
.
.
.
.
.
.
.
.
184
13.3.5 Forced page breaks
.
.
.
.
.
.
.
.
.
.
184
13.3.6 "Best" page breaks
.
.
.
.
.
.
.
.
.
185
13.4 Cascading in the page context
.
.
.
.
.
.
.
.
.
.
.
.
187
14 Colors and Backgrounds
.
.
.
.
.
.
.
187
14.1 Foreground color: the ’color’ property
.
.
.
.
.
.
.
.
.
.
.
.
187
14.2 The background
14.2.1 Background properties: ’background-color’, ’back-
ground-image’, ’background-repeat’, ’background-attachment’,
.
.
.
.
.
.
.
188
’background-position’, and ’background’
.
.
.
.
.
.
.
.
.
.
.
.
193
14.3 Gamma correction
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
195
15 Fonts
.
.
.
.
.
.
.
.
.
.
.
.
.
196
15.1 Introduction
.
.
.
.
.
.
.
.
.
.
.
.
197
15.2 Font specification
.
.
.
.
.
.
.
.
198
15.2.1 Font specification properties
.
.
.
.
.
.
199
15.2.2 Font family: the ’font-family’ property
15.2.3 Font styling: the ’font-style’, ’font-variant’, ’font-weight’ and
.
.
.
.
.
.
.
.
.
.
.
200
’font-stretch’ properties
.
203
15.2.4 Font size: the ’font-size’ and ’font-size-adjust’ properties
.
.
.
.
207
15.2.5 Shorthand font property: the ’font’ property
.
.
.
.
.
.
.
.
.
.
209
15.2.6 Generic font families
.
.
.
.
.
.
.
.
.
.
.
.
.
.
210
serif
.
.
.
.
.
.
.
.
.
.
.
.
.
210
sans-serif
8
.
.
.
.
.
.
.
.
.
.
.
.
.
.
211
cursive
.
.
.
.
.
.
.
.
.
.
.
.
.
.
211
fantasy
.
.
.
.
.
.
.
.
.
.
.
.
212
monospace
.
.
.
.
.
.
.
.
.
.
.
.
.
212
15.3 Font selection
.
.
.
.
.
.
213
15.3.1 Font Descriptions and @font-face
15.3.2 Descriptors for Selecting a Font: ’font-family’, ’font-style’,
.
.
.
215
’font-variant’, ’font-weight’, ’font-stretch’ and ’font-size’
.
217
15.3.3 Descriptors for Font Data Qualification: ’unicode-range’
.
.
.
.
218
15.3.4 Descriptor for Numeric Values: ’units-per-em’
.
.
.
.
.
.
.
218
15.3.5 Descriptor for Referencing: ’src’
15.3.6 Descriptors for Matching: ’panose-1’, ’stemv’, ’stemh’,
.
.
.
220
’slope’, ’cap-height’, ’x-height’, ’ascent’, and ’descent’
222
15.3.7 Descriptors for Synthesis: ’widths’, ’bbox’ and ’definition-src’
15.3.8 Descriptors for Alignment: ’baseline’, ’centerline’, ’mathline’,
.
.
.
.
.
.
.
.
.
.
.
.
.
223
and ’topline’
.
.
.
.
.
.
.
.
.
.
.
.
224
15.3.9 Examples
.
.
.
.
.
.
.
.
.
.
.
226
15.4 Font Characteristics
.
.
.
.
.
.
.
226
15.4.1 Introducing Font Characteristics
.
.
.
.
.
.
.
.
.
.
.
226
15.4.2 Full font name
.
.
.
.
.
.
227
15.4.3 Coordinate units on the em square
.
.
.
.
.
.
.
.
.
.
.
227
15.4.4 Central Baseline
.
.
.
.
.
.
.
.
.
.
.
227
15.4.5 Font Encoding
.
.
.
.
.
.
.
.
.
.
228
15.4.6 Font family name
.
.
.
.
.
.
.
.
.
.
.
.
228
15.4.7 Glyph widths
.
.
.
.
.
.
.
.
.
228
15.4.8 Horizontal stem width
.
.
.
.
.
.
.
.
228
15.4.9 Height of uppercase glyphs
.
.
.
.
.
.
.
.
228
15.4.10 Height of lowercase glyphs
.
.
.
.
.
.
.
.
.
.
.
229
15.4.11 Lower Baseline
.
.
.
.
.
.
.
.
.
229
15.4.12 Mathematical Baseline
.
.
.
.
.
.
.
.
.
229
15.4.13 Maximal bounding box
.
.
.
.
.
.
.
229
15.4.14 Maximum unaccented height
.
.
.
.
.
.
.
229
15.4.15 Maximum unaccented depth
.
.
.
.
.
.
.
.
.
.
230
15.4.16 Panose-1 number
.
.
.
.
.
.
.
230
15.4.17 Range of ISO 10646 characters
.
.
.
.
.
.
.
.
.
.
.
230
15.4.18 Top Baseline
.
.
.
.
.
.
.
.
.
.
231
15.4.19 Vertical stem width
.
.
.
.
.
.
.
.
.
231
15.4.20 Vertical stroke angle
.
.
.
.
.
.
.
.
.
.
231
15.5 Font matching algorithm
.
.
.
.
.
233
15.5.1 Mapping font weight values to font names
.
.
.
.
.
.
.
.
234
15.5.2 Examples of font matching
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
237
16 Text
.
.
.
.
.
.
.
237
16.1 Indentation: the ’text-indent’ property
.
.
.
.
.
.
.
.
238
16.2 Alignment: the ’text-align’ property
.
.
.
.
.
.
.
.
.
.
.
.
.
.
238
16.3 Decoration
16.3.1 Underlining, overlining, striking, and blinking: the ’text-deco-
.
.
.
.
.
.
.
.
.
.
.
.
.
239
ration’ property
.
.
.
.
.
239
16.3.2 Text shadows: the ’text-shadow’ property
9
16.4 Letter and word spacing: the ’letter-spacing’ and ’word-spacing’
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
241
properties
.
.
.
.
.
.
242
16.5 Capitalization: the ’text-transform’ property
.
.
.
.
.
.
.
243
16.6 Whitespace: the ’white-space’ property
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
245
17 Tables
.
.
.
.
.
.
.
.
.
.
.
245
17.1 Introduction to tables
.
.
.
.
.
.
.
.
.
.
.
247
17.2 The CSS table model
.
.
.
.
.
.
.
.
.
248
17.2.1 Anonymous table objects
.
.
.
.
.
.
.
.
.
.
.
.
249
17.3 Column selectors
.
.
.
.
.
.
.
250
17.4 Tables in the visual formatting model
.
.
.
.
.
.
.
251
17.4.1 Caption position and alignment
.
.
.
.
.
.
.
.
.
253
17.5 Visual layout of table contents
.
.
.
.
.
.
.
254
17.5.1 Table layers and transparency
.
.
.
256
17.5.2 Table width algorithms: the ’table-layout’ property
.
.
.
.
.
.
.
.
.
.
.
257
Fixed table layout
.
.
.
.
.
.
.
.
.
.
257
Automatic table layout
.
.
.
.
.
.
.
.
.
258
17.5.3 Table height algorithms
.
.
.
.
.
.
.
260
17.5.4 Horizontal alignment in a column
.
.
.
.
.
.
.
261
17.5.5 Dynamic row and column effects
.
.
.
.
.
.
.
.
.
.
.
.
.
.
261
17.6 Borders
.
.
.
.
.
.
.
261
17.6.1 The separated borders model
.
. 262
Borders around empty cells: the ’empty-cells’ property
.
.
.
.
.
.
.
.
263
17.6.2 The collapsing border model
.
.
.
.
.
.
.
.
.
264
Border conflict resolution
.
.
.
.
.
.
.
.
.
.
.
.
266
17.6.3 Border styles
.
.
.
.
.
.
.
.
.
.
267
17.7 Audio rendering of tables
.
.
.
267
17.7.1 Speaking headers: the ’speak-header’ property
.
.
.
.
.
.
.
.
.
.
.
.
.
.
271
18 User interface
.
.
.
.
.
.
.
.
.
271
18.1 Cursors: the ’cursor’ property
.
.
.
.
.
.
.
.
.
.
272
18.2 User preferences for colors
.
.
.
.
.
.
.
.
.
.
274
18.3 User preferences for fonts
.
.
.
.
.
.
.
274
18.4 Dynamic outlines: the ’outline’ property
.
.
.
.
.
.
.
.
.
275
18.4.1 Outlines and the focus
.
.
.
.
.
.
.
.
.
.
.
.
.
276
18.5 Magnification
.
.
.
.
.
.
.
.
.
.
.
.
.
.
277
19 Aural style sheets
.
.
.
.
.
.
.
.
277
19.1 Introduction to aural style sheets
.
.
.
.
.
.
.
.
.
278
19.2 Volume properties: ’volume’
.
.
.
.
.
.
.
.
.
279
19.3 Speaking properties: ’speak’
.
. 279
19.4 Pause properties: ’pause-before’, ’pause-after’, and ’pause’
.
.
.
.
281
19.5 Cue properties: ’cue-before’, ’cue-after’, and ’cue’
.
.
.
.
.
.
.
.
.
282
19.6 Mixing properties: ’play-during’
.
.
.
.
.
.
283
19.7 Spatial properties: ’azimuth’ and ’elevation’
19.8 Voice characteristic properties: ’speech-rate’, ’voice-family’, ’pitch’,
.
.
.
.
.
.
.
.
.
285
’pitch-range’, ’stress’, and ’richness’
.
. 288
19.9 Speech properties: ’speak-punctuation’ and ’speak-numeral’
.
.
.
.
.
.
.
291
Appendix A. A sample style sheet for HTML 4.0
.
.
.
.
.
.
.
.
.
.
293
Appendix B. Changes from CSS1
10
.
.
.
.
.
.
.
.
.
.
.
.
293
B.1 New functionality
.
.
.
.
.
.
.
.
.
.
.
294
B.2 Updated descriptions
.
.
.
.
.
.
.
.
.
294
B.3 Semantic changes from CSS1
.
.
.
.
295
Appendix C. Implementation and performance notes for fonts
.
.
.
.
.
.
.
.
.
.
.
295
C.1 Glossary of font terms
.
.
.
.
.
.
.
.
.
.
.
.
.
299
C.2 Font retrieval
.
.
.
.
.
.
.
.
.
299
C.3 Meaning of the Panose Digits
.
.
.
.
.
.
.
302
C.4 Deducing Unicode Ranges for TrueType
.
.
.
.
.
.
.
.
.
305
C.5 Automatic descriptor generation
.
.
.
.
.
.
.
.
.
.
309
Appendix D. The grammar of CSS2
.
.
.
.
.
.
.
.
.
.
.
.
.
.
309
D.1 Grammar
.
.
.
.
.
.
.
.
.
.
.
.
.
311
D.2 Lexical scanner
.
.
.
.
.
312
D.3 Comparison of tokenization in CSS2 and CSS1
.
.
.
.
.
.
.
.
.
.
.
.
.
313
Appendix E. References
.
.
.
.
.
.
.
.
.
.
.
313
E.1 Normative references
.
.
.
.
.
.
.
.
.
.
.
315
E.2 Informative references
.
.
.
.
.
.
.
.
.
.
.
.
317
Appendix F. Property index
.
.
.
.
.
.
.
.
.
.
.
323
Appendix G. Descriptor index
.
.
.
.
.
.
.
.
.
.
.
.
.
.
325
Appendix H. Index
Copyright [p. 18] © 1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.
11
12
1 About the CSS2 Specification
Contents
.
.
.
.
.
.
.
.
.
.
.
.
13
1.1 Reading the specification
.
.
.
.
.
.
.
.
.
13
1.2 How the specification is organized
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
1.3 Conventions
.
.
.
.
.
14
1.3.1 Document language elements and attributes
.
.
.
.
.
.
.
.
.
.
14
1.3.2 CSS property definitions
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
Value
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Initial
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Applies to
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Inherited
.
.
.
.
.
.
.
.
.
.
.
.
16
Percentage values
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Media groups
.
.
.
.
.
.
.
.
.
.
.
16
1.3.3 Shorthand properties
.
.
.
.
.
.
.
.
.
.
.
17
1.3.4 Notes and examples
.
.
.
.
.
.
.
.
.
17
1.3.5 Images and long descriptions
.
.
.
.
.
.
.
.
.
.
.
.
.
17
1.4 Acknowledgments
.
.
.
.
.
.
.
.
.
.
.
.
.
.
18
1.5 Copyright Notice
1.1 Reading the specification
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 conforming user agents [p. 32] . 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.
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.
1.2 How the specification is organized
The specification is organized into the following sections:
13
Section 2: An introduction to CSS2
The introduction includes a brief tutorial on CSS2 and a discussion of design
principles behind CSS2.
Sections 3 - 20: CSS2 reference manual.
The bulk of the reference manual consists of the CSS2 language reference.
This reference defines what may go into a CSS2 style sheet (syntax, proper-
ties, property values) and how user agents must interpret these style sheets
in order to claim conformance [p. 32] .
Appendixes:
Appendixes contain information about a sample style sheet for HTML 4.0
[p. 291] , changes from CSS1 [p. 293] , implementation and performance
notes [p. 295] , the grammar of CSS2 [p. 309] , a list of normative and infor-
mative references [p. 313] , and three indexes: one for properties [p. 317] ,
one for descriptors [p. 323] , and one general index [p. 325] .
1.3 Conventions
1.3.1 Document language elements and attributes
CSS property, descriptor, and pseudo-class names are delimited by single
quotes.
CSS values are delimited by single quotes.
Document language element names are in uppercase letters.
Document language attribute names are in lowercase letters and delimited
by double quotes.
1.3.2 CSS property definitions
Each CSS property definition begins with a summary of key information that
resembles the following:
’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
Value
This part specifies the set of valid values for the property. Value types may be
designated in several ways:
1. keyword values (e.g., auto, disc, etc.)
2. basic data types, which appear between "<" and ">" (e.g.,,
, etc.). In the electronic version of the document, each instance
of a basic data type links to its definition.
3. types that have the same range of values as a property bearing the same
14
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’>). In the electronic version of the document, each
instance of this type of non-terminal links to the corresponding property defi-
nition.
4. non-terminals that do not share the same name as a property. In this case,
the non-terminal name appears between "<" and ">", as in.
Notice the distinction between 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 correspond-
ing value definition.
Other words in these definitions are keywords that must appear literally,
without quotes (e.g., red). The slash (/) and the comma (,) must also appear liter-
ally.
Values may be arranged as follows:
Several juxtaposed words mean that all of them must occur, in the given
order.
A bar (|) separates two or more alternatives: exactly one of them must occur.
A double bar (||) separates two or more options: one or more of them must
occur, in any order.
Brackets ([ ]) are for grouping.
Juxtaposition is stronger than the double bar, and the double bar is stronger
than the bar. Thus, the following lines are equivalent:
a b | c || d e
[ a b ] | [ c || [ d e ]]
Every type, keyword, or bracketed group may be followed by one of the follow-
ing modifiers:
An asterisk (*) indicates that the preceding type, word, or group occurs zero
or more times.
A plus (+) indicates that the preceding type, word, or group occurs one or
more times.
A question mark (?) indicates that the preceding type, word, or group is
optional.
A pair of numbers in curly braces ({A,B}) indicates that the preceding type,
word, or group occurs at least A and at most B times.
The following examples illustrate different value types:
Value: N | NW | NE
Value: [ | thick | thin ]{1,4}
Value: [ , ]*
Value:? [ / ]?
Value: ||
15
Initial
This part specifies the property’s initial value. If the property is inherited, this is
the value that is given to the root element of the document tree [p. 30] . Please
consult the section on the cascade [p. 69] for information about the interaction
between style sheet-specified, inherited, and initial values.
Applies to
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, ’white-space’ only affects block-level
elements.
Inherited
This part indicates whether the value of the property is inherited from an ancestor
element. Please consult the section on the cascade [p. 69] for information about
the interaction between style sheet-specified, inherited, and initial values.
Percentage values
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 as values.
Media groups
This part indicates the media groups [p. 79] to which the property applies. The
conformance [p. 29] conditions state that user agents must support this property
if they support rendering to the media types [p. 78] included in these media
groups [p. 79] .
1.3.3 Shorthand properties
Some properties are shorthand properties, meaning they allow authors to specify
the values of several properties with a single property.
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.
When values are omitted from a shorthand form, each "missing" property is
assigned its initial value (see the section on the cascade [p. 69] ).
Example(s):
The multiple style rules of this example:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
16
may be rewritten with a single shorthand property:
H1 { font: bold 12pt/14pt Helvetica }
In this example, ’font-variant’, ’font-stretch’, ’font-size-adjust’, and ’font-style’
take their initial values.
1.3.4 Notes and examples
All examples that illustrate illegal usage are clearly marked as "ILLEGAL
EXAMPLE".
All HTML examples conform to the HTML 4.0 strict DTD (defined in [HTML40])
unless otherwise indicated by a document type declaration.
All notes are informative only.
Examples and notes are marked within the source HTML for the specification
and CSS1 user agents will render them specially.
1.3.5 Images and long descriptions
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]" to the right of the image.
Images and long descriptions are informative only.
1.4 Acknowledgments
This specification is the product of the W3C Working Group on Cascading Style
Sheets and Formatting Properties. In addition to the editors of this specification,
the members of the Working Group are: Brad Chase (Bitstream), Chris Wilson
(Microsoft), Daniel Glazman (Electricité de France), Dave Raggett (W3C/HP), Ed
Tecot (Microsoft), Jared Sorensen (Novell), Lauren Wood (SoftQuad), Laurie
Anna Kaplan (Microsoft), Mike Wexler (Adobe), Murray Maloney (Grif), Powell
Smith (IBM), Robert Stevahn (HP), Steve Byrne (JavaSoft), Steven Pemberton
(CWI), Thom Phillabaum (Netscape), Douglas Rand (Silicon Graphics), Robert
Pernett (Lotus), Dwayne Dicks (SoftQuad), and Sho Kuwamoto (Macromedia).
We thank them for their continued efforts.
A number of invited experts to the Working Group have contributed: George
Kersher, Glenn Rippel (Bitstream), Jeff Veen (HotWired), Markku T. Hakkinen
(The Productivity Works), Martin Dürst (W3C, formerly Universität Zürich), Roy
Platon (RAL), Todd Fahrner (Verso), Tim Boland (NIST), Eric Meyer (Case
Western Reserve University), and Vincent Quint (W3C).
The section on Web Fonts was strongly shaped by Brad Chase (Bitstream)
David Meltzer (Microsoft Typography) and Steve Zilles (Adobe). The following
people have also contributed in various ways to the section pertaining to fonts:
Alex Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP), Dave
Raggett (W3C/HP), David Opstad (Apple), David Goldsmith (Apple), Ed Tecot
(Microsoft), Erik van Blokland (LettError), François Yergeau (Alis), Gavin Nicol
(Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul
Haeberli (SGI), and the late Phil Karlton (Netscape).
17
The section on Paged Media was in large parts authored by Robert Stevahn
(HP) and Stephen Waters (Microsoft).
Robert Stevahn (HP), Scott Furman (Netscape), and Scott Isaacs (Microsoft)
were key contributors to CSS Positioning.
Mike Wexler (Adobe) was the editor of the interim working draft, which
described many of the new features of CSS2.
T.V. Raman (Adobe) made pivotal contributions towards Aural Cascading Style
Sheets (ACSS) and the concepts of aural presentation based on his work on
AsTeR (Audio System For Technical Readings). He contributed an initial draft of
the ACSS specification that shaped the current specification. Values for aural
properties in the HTML 4.0 sample style sheet [p. 291] are of his devising; he
currently uses them on a daily basis on his audio desktop in conjunction with
Emacspeak and the Emacs W3 browser (authored by William Perry, who also
implemented the aural extensions on the W3 side of the fence).
Todd Fahrner (Verso) researched contemporary and historical browsers to
develop the sample style sheet in the appendix.
Thanks to Jan Kärrman, author of html2ps for helping so much in creating the
PostScript version of the specification.
Through electronic and physical encounters, the following people have
contributed to the development of CSS2: Alan Borning, Robert Cailliau, Liz
Castro, James Clark, Dan Connolly, Donna Converse, Daniel Dardailler, Al
Gilman, Daniel Greene, Scott Isaacs, Geir Ivarsøy, Vincent Mallet, Kim Marriott,
Brian Michalowski, Lou Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Eva von
Pepel, William Perry, David Siegel, Peter Stuckey, and Jason White.
The discussions on www-style@w3.org have been influential in many key
issues for CSS. Especially, we would like to thank Bjorn Backlund, Todd Fahrner,
Lars Marius Garshol, Sue Jordan, Ian Hickson, Susan Lesch, Andrew Marshall,
MegaZone, Eric Meyer, Russell O’Connor, David Perrell, Liam Quinn, Jon
Seymour, Neil St. Laurent, Taylor, Brian Wilson, and Chris Wilson for their partic-
ipation.
Many thanks to the Web Accessibility Initiative Protocols and Formats Techni-
cal Review Working Group (WAI PF) for helping to improve the accessibility of
CSS2.
Many thanks to Philippe Le Hégaret, whose CSS validator helped ensure
correct examples and a sensible grammar.
Special thanks to Arnaud Le Hors, whose engineering contributions made this
document work.
Adam Costello improved this specification by performing a detailed review.
Lastly, thanks to Tim Berners-Lee without whom none of this would have been
possible.
1.5 Copyright Notice
Copyright © 1997 World Wide Web Consortium, (Massachusetts Institute of
Technology, Institut National de Recherche en Informatique et en Automa-
tique, Keio University). All Rights Reserved.
Documents on the W3C site are provided by the copyright holders under the
following license. By obtaining, using and/or copying this document, or the W3C
document from which this statement is linked, you agree that you have read,
understood, and will comply with the following terms and conditions:
18
Permission to use, copy, and distribute the contents of this document, or the
W3C document from which this statement is linked, in any medium for any
purpose and without fee or royalty is hereby granted, provided that you include
the following on ALL copies of the document, or portions thereof, that you use:
1. A link or URI to the original W3C document.
2. The pre-existing copyright notice of the original author, if it doesn’t exist, a
notice of the form: "Copyright © World Wide Web Consortium,
(Massachusetts Institute of Technology, Institut National de Recherche en
Informatique et en Automatique, Keio University). All Rights Reserved."
3. If it exists, the STATUS of the W3C document.
When space permits, inclusion of the full text of this NOTICE should be
provided. In addition, credit shall be attributed to the copyright holders for any
software, documents, or other items or products that you create pursuant to the
implementation of the contents of this document, or any portion thereof.
No right to create modifications or derivatives is granted pursuant to this
license.
THIS DOCUMENT IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS
MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED,
INCLUDING, BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR TITLE;
THAT THE CONTENTS OF THE DOCUMENT ARE SUITABLE FOR ANY
PURPOSE; NOR THAT THE IMPLEMENTATION OF SUCH CONTENTS WILL
NOT INFRINGE ANY THIRD PARTY PATENTS, COPYRIGHTS, TRADE-
MARKS OR OTHER RIGHTS.
COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDI-
RECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF ANY
USE OF THE DOCUMENT OR THE PERFORMANCE OR IMPLEMENTATION
OF THE CONTENTS THEREOF.
The name and trademarks of copyright holders may NOT be used in advertis-
ing or publicity pertaining to this document or its contents without specific, written
prior permission. Title to copyright in this document will at all times remain with
copyright holders.
19
20
2 Introduction to CSS2
Contents
.
.
.
.
.
.
.
.
.
.
21
2.1 A brief CSS2 tutorial for HTML
.
.
.
.
.
.
.
.
.
.
.
23
2.2 A brief CSS2 tutorial for XML
.
.
.
.
.
.
.
.
.
.
.
25
2.3 The CSS2 processing model
.
.
.
.
.
.
.
.
.
.
.
.
.
26
2.3.1 The canvas
.
.
.
.
.
.
.
.
.
.
26
2.3.2 CSS2 addressing model
.
.
.
.
.
.
.
.
.
.
.
.
26
2.4 CSS design principles
2.1 A brief CSS2 tutorial for HTML
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 [HTML40]) and some basic
desktop publishing terminology.
We begin with a small HTML document:
Bach’s home page
Bach’s home page
21
Bach’s home page
Bach’s home page
Bach’s home page
My home page
This results in the following tree:
HTML
HEAD
TITLE
BODY
P
UL
LI
H1
LI
LI
According to the definition of HTML, HEAD elements will be inferred during
parsing and become part of the document tree even if the HEAD tags are not in
the document source. Similarly, the parser knows where the P and LIs end, even
though there are no and tags in the source.
31
3.2 Conformance
This section defines conformance with the CSS2 specification only. There may
be other levels of CSS in the future that may require a user agent to implement a
different set of features in order to conform.
In general, the following points must be observed by a user agent claiming
conformance to this specification:
1. It must support one or more of the CSS2 media types [p. 77] .
2. For each source document, it must attempt to retrieve all associated style
sheets that are appropriate for the supported media types. If it cannot
retrieve all associated style sheets (for instance, because of network errors),
it must display the document using those it can retrieve.
3. It must parse the style sheets according to this specification. In particular, it
must recognize all at-rules, blocks, declarations, and selectors (see the
grammar of CSS2 [p. 309] ). If a user agent encounters a property that
applies for a supported media type, the user agent must parse the value
according to the property definition. This means that the user agent must
accept all valid values and must ignore declarations with invalid values. User
agents must ignore rules that apply to unsupported media types [p. 77] .
4. For each element in a document tree [p. 30] , it must assign a value for
every applicable property according to the property’s definition and the rules
of cascading and inheritance [p. 69] .
5. If the source document comes with alternate style sheets (such as with the
"alternate" keyword in HTML 4.0 [HTML40]), the UA must allow the user to
select one from among these style sheets and apply the selected one.
Not every user agent must observe every point, however:
A user agent that inputs style sheets must respect points 1 - 3.
An authoring tool is only required to output valid style sheets [p. 29]
A user agent that renders a document with associated style sheets must
respect points 1 - 5 and render the document according to the
media-specific requirements set forth in this specification. Values [p. 70] may
be approximated when required by the user agent.
The inability of a user agent to implement part of this specification due to the
limitations of a particular device (e.g., a user agent cannot render colors on a
monochrome monitor or page) does not imply non-conformance.
This specification recommends that a user agent allow the user to specify user
style sheets.
3.3 Error conditions
In general, this document does not specify error handling behavior for user
agents (e.g., how they behave when they cannot find a resource designated by a
URI).
However, user agents must observe the rules for handling parsing errors
[p. 42] .
32
Since user agents may vary in how they handle error conditions, authors and
users must not rely on specific error recovery behavior.
3.4 The text/css content type
CSS style sheets that exist in separate files are sent over the Internet as a
sequence of bytes accompanied by encoding information (see [HTML40],
chapter 5). The structure of the transmission, termed a message entity, is
defined by RFC 2045 and RFC 2068 (see [RFC2045] and [RFC2068]). A
message entity with a content type of "text/css" represents an independent CSS
document. The "text/css" content type has been registered by RFC 2138
([RFC2318]).
33
34
4 CSS2 syntax and basic data types
Contents
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
35
4.1 Syntax
.
.
.
.
.
.
.
.
.
.
.
.
.
35
4.1.1 Tokenization
.
.
.
.
.
.
.
.
.
.
.
.
.
.
38
4.1.2 Keywords
.
.
.
.
.
.
.
.
.
.
.
38
4.1.3 Characters and case
.
.
.
.
.
.
.
.
.
.
.
.
.
39
4.1.4 Statements
.
.
.
.
.
.
.
.
.
.
.
.
.
.
39
4.1.5 At-rules
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
40
4.1.6 Blocks
.
.
.
.
.
40
4.1.7 Rule sets, declaration blocks, and selectors
.
.
.
.
.
.
.
.
.
41
4.1.8 Declarations and properties
.
.
.
.
.
.
.
.
.
.
.
.
.
42
4.1.9 Comments
.
.
.
.
.
.
.
.
.
.
42
4.2 Rules for handling parsing errors
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
43
4.3 Values
.
.
.
.
.
.
.
.
.
.
43
4.3.1 Integers and real numbers
.
.
.
.
.
.
.
.
.
.
.
.
.
.
43
4.3.2 Lengths
.
.
.
.
.
.
.
.
.
.
.
.
.
46
4.3.3 Percentages
.
.
.
.
.
.
.
.
.
.
.
.
46
4.3.4 URL + URN = URI
.
.
.
.
.
.
.
.
.
.
.
.
.
.
47
4.3.5 Counters
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
48
4.3.6 Colors
.
.
.
.
.
.
.
.
.
.
.
.
.
.
49
4.3.7 Angles
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
49
4.3.8 Times
.
.
.
.
.
.
.
.
.
.
.
.
.
50
4.3.9 Frequencies
.
.
.
.
.
.
.
.
.
.
.
.
.
.
50
4.3.10 Strings
.
.
.
.
.
.
.
.
.
.
50
4.4 CSS document representation
.51
4.4.1 Referring to characters not represented in a character encoding
4.1 Syntax
This section describes a grammar (and forward-compatible parsing rules)
common to any version of CSS (including CSS2). Future versions of CSS will
adhere to this core syntax, although they may add additional syntactic
constraints.
These descriptions are normative. They are also complemented by the norma-
tive grammar rules presented in Appendix D [p. 309] .
4.1.1 Tokenization
All levels of CSS -- level 1, level 2, and any future levels -- use the same core
syntax. This allows UAs to parse (though not completely understand) style
sheets written in levels of CSS that didn’t exist at the time the UAs were created.
Designers can use this feature to create style sheets that work with older user
agents, while also exercising the possibilities of the latest levels of CSS.
35
At the lexical level, CSS style sheets consist of a sequence of tokens. The list
of tokens for CSS2 is as follows. The definitions use Lex-style regular expres-
sions. Octal codes refer to ISO 10646 ([ISO10646]). As in Lex, in case of multiple
matches, the longest match determines the token.
Token
Definition
IDENT
{ident}
ATKEYWORD
@{ident}
STRING
{string}
HASH
#{name}
NUMBER
{num}
PERCENTAGE
{num}%
DIMENSION
{num}{ident}
URI
url\({w}{string}{w}\)
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE
U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO
;
;
{
\{
}
\}
(
\(
)
\)
[
\[
]
\]
S
[ \t\r\n\f]+
COMMENT
\/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION
{ident}\(
INCLUDES
~=
DASHMATCH
|=
DELIM
any other character not matched by the above rules
The macros in curly braces ({}) above are defined as follows:
36
Macro
Definition
ident
{nmstart}{nmchar}*
name
{nmchar}+
nmstart
[a-zA-Z]|{nonascii}|{escape}
nonascii
[^\0-\177]
unicode
\\[0-9a-f]{1,6}[ \n\r\t\f]?
escape
{unicode}|\\[ -~\200-\4177777]
nmchar
[a-z0-9-]|{nonascii}|{escape}
num
[0-9]+|[0-9]*\.[0-9]+
string
{string1}|{string2}
string1
\"([\t
!#$%&(-~]|\\{nl}|\’|{nonascii}|{escape})*\"
string2
\’([\t
!#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\’
nl
\n|\r\n|\r|\f
w
[ \t\r\n\f]*
Below is the core syntax for CSS. The sections that follow describe how to use
it. Appendix D [p. 309] describes a more restrictive grammar that is closer to the
CSS level 2 language.
stylesheet : [ CDO | CDC | S | statement ]*;
statement : ruleset | at-rule;
at-rule : ATKEYWORD S* any* [ block | ’;’ S* ];
block : ’{’ S* [ any | block | ATKEYWORD S* | ’;’ ]* ’}’ S*;
ruleset : selector? ’{’ S* declaration? [ ’;’ S* declaration? ]* ’}’ S*;
selector : any+;
declaration : property ’:’ S* value;
property : IDENT S*;
value : [ any | block | ATKEYWORD S* ]+;
any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
| DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
| FUNCTION | DASHMATCH | ’(’ any* ’)’ | ’[’ any* ’]’ ] S*;
COMMENT tokens do not occur in the grammar (to keep it readable), but any
number of these tokens may appear anywhere between other tokens.
The token S in the grammar above stands for whitespace. Only the characters
"space" (Unicode code 32), "tab" (9), "line feed" (10), "carriage return" (13), and
"form feed" (12) can occur in whitespace. Other space-like characters, such as
"em-space" (8195) and "ideographic space" (12288), are never part of whites-
pace.
37
4.1.2 Keywords
Keywords have the form of identifiers. Keywords must not be placed between
quotes ("..." or ’...’). Thus,
red
is a keyword, but
"red"
is not. (It is a string [p. 50] .) Other illegal examples:
Illegal example(s):
width: "auto";
border: "none";
font-family: "serif";
background: "red";
4.1.3 Characters and case
The following rules always hold:
All CSS style sheets are case-insensitive, except for parts that are not under
the control of CSS. For example, the case-sensitivity of values of the HTML
attributes "id" and "class", of font names, and of URIs lies outside the scope
of this specification. Note in particular that element names are case-insensi-
tive in HTML, but case-sensitive in XML.
In CSS2, identifiers (including element names, classes, and IDs in selectors
[p. 53] ) can contain only the characters [A-Za-z0-9] and ISO 10646 charac-
ters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a
digit. They can also contain escaped characters and any ISO 10646 charac-
ter as a numeric code (see next item). For instance, the identifier "B&W?"
may be written as "B\&W\?" or "B\26 W\3F".
Note that Unicode is code-by-code equivalent to ISO 10646 (see
[UNICODE] and [ISO10646]).
In CSS2, a backslash (\) character indicates three types of character
escapes.
First, inside a string [p. 50] , a backslash followed by a newline is ignored
(i.e., the string is deemed not to contain either the backslash or the newline).
Second, it cancels the meaning of special CSS characters. Any character
(except a hexadecimal digit) can be escaped with a backslash to remove its
special meaning. For example, "\"" is a string consisting of one double
quote. Style sheet preprocessors must not remove these backslashes from a
style sheet since that would change the style sheet’s meaning.
Third, backslash escapes allow authors to refer to characters they can’t
easily put in a document. In this case, the backslash is followed by at most
six hexadecimal digits (0..9A..F), which stand for the ISO 10646
([ISO10646]) character with that number. If a digit or letter follows the
hexadecimal number, the end of the number needs to be made clear. There
are two ways to do that:
1. with a space (or other whitespace character): "\26 B" ("&B")
2. by providing exactly 6 hexadecimal digits: "\000026B" ("&B")
38
In fact, these two methods may be combined. Only one whitespace char-
acter is ignored after a hexadecimal escape. Note that this means that a
"real" space after the escape sequence must itself either be escaped or
doubled.
Backslash escapes are always considered to be part of an identifier [p. 38]
or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is
allowed at the start of a class name, even though "2" is not).
4.1.4 Statements
A CSS style sheet, for any version of CSS, consists of a list of statements (see
the grammar above). There are two kinds of statements: at-rules and rule sets.
There may be whitespace [p. 37] around the statements.
In this specification, the expressions "immediately before" or "immediately
after" mean with no intervening whitespace or comments.
4.1.5 At-rules
At-rules start with an at-keyword, an ’@’ character followed immediately by an
identifier [p. 38] (for example, ’@import’, ’@page’).
An at-rule consists of everything up to and including the next semicolon (;) or
the next block, [p. 40] whichever comes first. A CSS user agent that encounters
an unrecognized at-rule must ignore [p. 42] the whole of the at-rule and continue
parsing after it.
CSS2 user agents must ignore [p. 42] any ’@import’ [p. 71] rule that occurs
inside a block [p. 40] or that doesn’t precede all rule sets.
Illegal example(s):
Assume, for example, that a CSS2 parser encounters this style sheet:
@import "subs.css";
H1 { color: blue }
@import "list.css";
The second ’@import’ is illegal according to CSS2. The CSS2 parser ignores
[p. 42] the whole at-rule, effectively reducing the style sheet to:
@import "subs.css";
H1 { color: blue }
Illegal example(s):
In the following example, the second ’@import’ rule is invalid, since it occurs
inside a ’@media’ block [p. 40] .
@import "subs.css";
@media print {
@import "print-main.css";
BODY { font-size: 10pt }
}
H1 {color: blue }
39
4.1.6 Blocks
A block starts with a left curly brace ({) and ends with the matching right curly
brace (}). In between there may be any characters, except that parentheses (( )),
brackets ([ ]) and braces ({ }) must always occur in matching pairs and may be
nested. Single (’) and double quotes (") must also occur in matching pairs, and
characters between them are parsed as a string. See Tokenization [p. 35] above
for the definition of a string.
Illegal example(s):
Here is an example of a block. Note that the right brace between the double
quotes does not match the opening brace of the block, and that the second
single quote is an escaped character [p. 38] , and thus doesn’t match the first
single quote:
{ causta: "}" + ({7} * ’\’’) }
Note that the above rule is not valid CSS2, but it is still a block as defined
above.
4.1.7 Rule sets, declaration blocks, and selectors
A rule set (also called "rule") consists of a selector followed by a declaration
block.
A declaration-block (also called a {}-block in the following text) starts with a left
curly brace ({) and ends with the matching right curly brace (}). In between there
must be a list of zero or more semicolon-separated (;) declarations.
The selector (see also the section on selectors [p. 53] ) consists of everything
up to (but not including) the first left curly brace ({). A selector always goes
together with a {}-block. When a user agent can’t parse the selector (i.e., it is not
valid CSS2), it must ignore [p. 42] the {}-block as well.
CSS2 gives a special meaning to the comma (,) in selectors. However, since it
is not known if the comma may acquire other meanings in future versions of
CSS, the whole statement should be ignored [p. 42] if there is an error anywhere
in the selector, even though the rest of the selector may look reasonable in
CSS2.
Illegal example(s):
For example, since the "&" is not a valid token in a CSS2 selector, a CSS2
user agent must ignore [p. 42] the whole second line, and not set the color of H3
to red:
H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }
Example(s):
Here is a more complex example. The first two pairs of curly braces are inside
a string, and do not mark the end of the selector. This is a valid CSS2 statement.
40
P[example="public class foo\
{\
private int x;\
\
foo(int x) {\
this.x = x;\
}\
\
}"] { color: red }
4.1.8 Declarations and properties
A declaration is either empty or consists of a property, followed by a colon (:),
followed by a value. Around each of these there may be whitespace [p. 37] .
Because of the way selectors work, multiple declarations for the same selector
may be organized into semicolon (;) separated groups.
Example(s):
Thus, the following rules:
H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }
are equivalent to:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}
A property is an identifier [p. 38] . Any character may occur in the value, but
parentheses ("( )"), brackets ("[ ]"), braces ("{ }"), single quotes (’) and double
quotes (") must come in matching pairs, and semicolons not in strings must be
escaped [p. 38] . Parentheses, brackets, and braces may be nested. Inside the
quotes, characters are parsed as a string.
The syntax of values is specified separately for each property, but in any case,
values are built from identifiers, strings, numbers, lengths, percentages, URIs,
colors, angles, times, and frequencies.
A user agent must ignore [p. 42] a declaration with an invalid property name or
an invalid value. Every CSS2 property has its own syntactic and semantic restric-
tions on the values it accepts.
Illegal example(s):
For example, assume a CSS2 parser encounters this style sheet:
H1 { color: red; font-style: 12pt } /* Invalid value: 12pt */
P { color: blue; font-vendor: any; /* Invalid prop.: font-vendor */
font-variant: small-caps }
EM EM { font-style: normal }
41
The second declaration on the first line has an invalid value ’12pt’. The second
declaration on the second line contains an undefined property ’font-vendor’. The
CSS2 parser will ignore [p. 42] these declarations, effectively reducing the style
sheet to:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
4.1.9 Comments
Comments begin with the characters "/*" and end with the characters "*/". They
may occur anywhere between tokens, and their contents have no influence on
the rendering. Comments may not be nested.
CSS also allows the SGML comment delimiters ("") in certain
places, but they do not delimit CSS comments. They are permitted so that style
rules appearing in an HTML source document (in the STYLE element) may be
hidden from pre-HTML 3.2 user agents. See the HTML 4.0 specification
([HTML40]) for more information.
4.2 Rules for handling parsing errors
In some cases, user agents must ignore part of an illegal style sheet. This speci-
fication defines ignore to mean that the user agent parses the illegal part (in
order to find its beginning and end), but otherwise acts as if it had not been there.
To ensure that new properties and new values for existing properties can be
added in the future, user agents are required to obey the following rules when
they encounter the following scenarios:
Unknown properties. User agents must ignore [p. 42] a declaration [p. 41]
with an unknown property. For example, if the style sheet is:
H1 { color: red; rotation: 70minutes }
the user agent will treat this as if the style sheet had been
H1 { color: red }
Illegal values. User agents must ignore a declaration with an illegal value.
For example:
IMG { float: left } /* correct CSS2 */
IMG { float: left here } /* "here" is not a value of ’float’ */
IMG { background: "red" } /* keywords cannot be quoted in CSS2 */
IMG { border-width: 3 } /* a unit must be specified for length values */
A CSS2 parser would honor the first rule and ignore [p. 42] the rest, as if the
style sheet had been:
IMG { float: left }
IMG { }
IMG { }
IMG { }
42
A user agent conforming to a future CSS specification may accept one or
more of the other rules as well.
Invalid at-keywords. User agents must ignore [p. 42] an invalid at-keyword
together with everything following it, up to and including the next semicolon
(;) or block ({...}), whichever comes first. For example, consider the following:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 { color: blue }
The ’@three-dee’ at-rule is not part of CSS2. Therefore, the whole at-rule
(up to, and including, the third right curly brace) is ignored. [p. 42] A CSS2
user agent ignores [p. 42] it, effectively reducing the style sheet to:
H1 { color: blue }
4.3 Values
4.3.1 Integers and real numbers
Some value types may have integer values (denoted by) or real
number values (denoted by). Real numbers and integers are specified
in decimal notation only. An consists of one or more digits "0" to "9". A
can either be an , or it can be zero or more digits followed by
a dot (.) followed by one or more digits. Both integers and real numbers may be
preceded by a "-" or "+" to indicate the sign.
Note that many properties that allow an integer or real number as a value actu-
ally restrict the value to some range, often to a non-negative value.
4.3.2 Lengths
Lengths refer to horizontal or vertical measurements.
The format of a length value (denoted by in this specification) is an
optional sign character (’+’ or ’-’, with ’+’ being the default) immediately followed
by a (with or without a decimal point) immediately followed by a unit
identifier (e.g., px, deg, etc.). After the ’0’ length, the unit identifier is optional.
Some properties allow negative length values, but this may complicate the
formatting model and there may be implementation-specific limits. If a negative
length value cannot be supported, it should be converted to the nearest value
that can be supported.
There are two types of length units: relative and absolute. Relative length units
specify a length relative to another length property. Style sheets that use relative
units will more easily scale from one medium to another (e.g., from a computer
display to a laser printer).
Relative units are:
43
em: the ’font-size’ of the relevant font
ex: the ’x-height’ of the relevant font
px: pixels, relative to the viewing device
Example(s):
H1 { margin: 0.5em } /* em */
H1 { margin: 1ex } /* ex */
P { font-size: 12px } /* px */
The ’em’ unit is equal to the computed value of the ’font-size’ property of the
element on which it is used. The exception is when ’em’ occurs in the value of
the ’font-size’ property itself, in which case it refers to the font size of the parent
element. It may be used for vertical or horizontal measurement. (This unit is also
sometimes called the quad-width in typographic texts.)
The ’ex’ unit is defined by the font’s ’x-height’. The x-height is so called
because it is often equal to the height of the lowercase "x". However, an ’ex’ is
defined even for fonts that don’t contain an "x".
Example(s):
The rule:
H1 { line-height: 1.2em }
means that the line height of H1 elements will be 20% greater than the font
size of the H1 elements. On the other hand:
H1 { font-size: 1.2em }
means that the font-size of H1 elements will be 20% greater than the font size
inherited by H1 elements.
When specified for the root of the document tree [p. 30] (e.g., "HTML" in
HTML), ’em’ and ’ex’ refer to the property’s initial value [p. 69] .
Pixel units are relative to the resolution of the viewing device, i.e., most often a
computer display. If the pixel density of the output device is very different from
that of a typical computer display, the user agent should rescale pixel values. It is
recommended that the reference pixel be the visual angle of one pixel on a
device with a pixel density of 90dpi and a distance from the reader of an arm’s
length. For a nominal arm’s length of 28 inches, the visual angle is therefore
about 0.0227 degrees.
For reading at arm’s length, 1px thus corresponds to about 0.28 mm
(1/90 inch). When printed on a laser printer, meant for reading at a little less than
arm’s length (55 cm, 21 inches), 1px is about 0.21 mm. On a 300 dots-per-inch
(dpi) printer, that may be rounded up to 3 dots (0.25 mm); on a 600 dpi printer, it
can be rounded to 5 dots.
The two images below illustrate the effect of viewing distance on the size of a
pixel and the effect of a device’s resolution. In the first image, a reading distance
of 71 cm (28 inch) results in a px of 0.28 mm, while a reading distance of 3.5 m
(12 feet) requires a px of 1.4 mm.
44
28 inch
71 cm
140 inch
3.5 m
0.28 mm
1.4 mm
viewer
In the second image, an area of 1px by 1px is covered by a single dot in a
low-resolution device (a computer screen), while the same area is covered by 16
dots in a higher resolution device (such as a 400 dpi laser printer).
laserprint
monitor screen
1px
1px
= 1 device pixel
Child elements do not inherit the relative values specified for their parent; they
(generally) inherit the computed values [p. 70] .
Example(s):
In the following rules, the computed ’text-indent’ value of H1 elements will be
36pt, not 45pt, if H1 is a child of the BODY element.
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e., 36pt */
}
H1 { font-size: 15pt }
Absolute length units are only useful when the physical properties of the output
medium are known. The absolute units are:
in: inches -- 1 inch is equal to 2.54 centimeters.
cm: centimeters
45
mm: millimeters
pt: points -- the points used by CSS2 are equal to 1/72th of an inch.
pc: picas -- 1 pica is equal to 12 points.
Example(s):
H1 { margin: 0.5in } /* inches */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points */
H4 { font-size: 1pc } /* picas */
In cases where the specified length cannot be supported, user agents must
approximate it in the actual value.
4.3.3 Percentages
The format of a percentage value (denoted by in this specification)
is an optional sign character (’+’ or ’-’, with ’+’ being the default) immediately
followed by a immediately followed by ’%’.
Percentage values are always relative to another value, for example a length.
Each property that allows percentages also defines the value to which the
percentage refers. The value may be that of another property for the same
element, a property for an ancestor element, or a value of the formatting context
(e.g., the width of a containing block [p. 96] ). When a percentage value is set for
a property of the root [p. 30] element and the percentage is defined as referring
to the inherited value of some property, the resultant value is the percentage
times the initial value [p. 69] of that property.
Example(s):
Since child elements (generally) inherit the computed values [p. 70] of their
parent, in the following example, the children of the P element will inherit a value
of 12pt for ’line-height’, not the percentage value (120%):
P { font-size: 10pt }
P { line-height: 120% } /* 120% of ’font-size’ */
4.3.4 URL + URN = URI
URLs (Uniform Resource Locators, see [RFC1738] and [RFC1808]) provide the
address of a resource on the Web. An expected new way of identifying resources
is called URN (Uniform Resource Name). Together they are called URIs (Uniform
Resource Identifiers, see [URI]). This specification uses the term URI.
URI values in this specification are denoted by. The functional notation
used to designate URIs in property values is "url()", as in:
Example(s):
BODY { background: url("http://www.bg.com/pinkish.gif") }
The format of a URI value is ’url(’ followed by optional whitespace [p. 37]
followed by an optional single quote (’) or double quote (") character followed by
the URI itself, followed by an optional single quote (’) or double quote (") charac-
ter followed by optional whitespace followed by ’)’. The two quote characters
must be the same.
46
Example(s):
An example without quotes:
LI { list-style: url(http://www.redballs.com/redball.png) disc }
Parentheses, commas, whitespace characters, single quotes (’) and double
quotes (") appearing in a URI must be escaped with a backslash: ’\(’, ’\)’, ’\,’.
Depending on the type of URI, it might also be possible to write the above
characters as URI-escapes (where "(" = %28, ")" = %29, etc.) as described in
[URI].
In order to create modular style sheets that are not dependent on the absolute
location of a resource, authors may use relative URIs. Relative URIs (as defined
in [RFC1808]) are resolved to full URIs using a base URI. RFC 1808, section 3,
defines the normative algorithm for this process. For CSS style sheets, the base
URI is that of the style sheet, not that of the source document.
Example(s):
For example, suppose the following rule:
BODY { background: url("yellow") }
is located in a style sheet designated by the URI:
http://www.myorg.org/style/basic.css
The background of the source document’s BODY will be tiled with whatever
image is described by the resource designated by the URI
http://www.myorg.org/style/yellow
User agents may vary in how they handle URIs that designate unavailable or
inapplicable resources.
4.3.5 Counters
Counters are denoted by identifiers (see the ’counter-increment’ and
’counter-reset’ properties). To refer to the value of a counter, the notation
’counter()’ or ’counter(, )’ is used. The
default style is ’decimal’.
To refer to a sequence of nested counters of the same name, the notation is
’counters(, )’ or ’counters(, ,
)’. See "Nested counters and scope" [p. 162] in the chapter on
generated content [p. 153] .
In CSS2, the values of counters can only be referred to from the ’content’ prop-
erty. Note that ’none’ is a possible: ’counter(x, none)’ yields an
empty string.
Example(s):
Here is a style sheet that numbers paragraphs (P) for each chapter (H1). The
paragraphs are numbered with roman numerals, followed by a period and a
space:
P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}
47
Counters that are not in the scope [p. 162] of any ’counter-reset’, are assumed
to have been reset to 0 by a ’counter-reset’ on the root element.
4.3.6 Colors
A is either a keyword or a numerical RGB specification.
The list of keyword color names is: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16
colors are defined in HTML 4.0 ([HTML40]). In addition to these color keywords,
users may specify keywords that correspond to the colors used by certain objects
in the user’s environment. Please consult the section on system colors [p. 272]
for more information.
Example(s):
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
The RGB color model is used in numerical color specifications. These exam-
ples all specify the same color:
Example(s):
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
The format of an RGB value in hexadecimal notation is a ’#’ immediately
followed by either three or six hexadecimal characters. The three-digit RGB nota-
tion (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by
adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white
(#ffffff) can be specified with the short notation (#fff) and removes any dependen-
cies on the color depth of the display.
The format of an RGB value in the functional notation is ’rgb(’ followed by a
comma-separated list of three numerical values (either three integer values or
three percentage values) followed by ’)’. The integer value 255 corresponds to
100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) =
rgb(100%,100%,100%) = #FFF. Whitespace [p. 37] characters are allowed
around the numerical values.
All RGB colors are specified in the sRGB color space (see [SRGB]). User
agents may vary in the fidelity with which they represent these colors, but using
sRGB provides an unambiguous and objectively measurable definition of what
the color should be, which can be related to international standards (see
[COLORIMETRY]).
Conforming user agents may limit their color-displaying efforts to performing a
gamma-correction on them. sRGB specifies a display gamma of 2.2 under speci-
fied viewing conditions. User agents should adjust the colors given in CSS such
that, in combination with an output device’s "natural" display gamma, an effective
display gamma of 2.2 is produced. See the section on gamma correction [p. 193]
for further details. Note that only colors specified in CSS are affected; e.g.,
images are expected to carry their own color information.
48
Values outside the device gamut should be clipped: the red, green, and blue
values must be changed to fall within the range supported by the device. For a
typical CRT monitor, whose device gamut is the same as sRGB, the three rules
below are equivalent:
Example(s):
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
EM { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
Other devices, such as printers, have different gamuts to sRGB; some colors
outside the 0..255 sRGB range will be representable (inside the device gamut),
while other colors inside the 0..255 sRGB range will be outside the device gamut
and will thus be clipped.
Note. Although colors can add significant amounts of information to document
and make them more readable, please consider that certain color combinations
may cause problems for users with color blindness. If you use a background
image or set the background color, please adjust foreground colors accordingly.
4.3.7 Angles
Angle values (denoted by in the text) are used with aural style sheets
[p. 277] .
Their format is an optional sign character (’+’ or ’-’, with ’+’ being the default)
immediately followed by a immediately followed by an angle unit iden-
tifier.
Angle unit identifiers are:
deg: degrees
grad: grads
rad: radians
Angle values may be negative. They should be normalized to the range
0-360deg by the user agent. For example, -10deg and 350deg are equivalent.
For example, a right angle is ’90deg’ or ’100grad’ or ’1.570796326794897rad’.
4.3.8 Times
Time values (denoted by
Cascading Style Sheets, level 2
CSS2 Specification
W3C Recommendation 12-May-1998
This version:
http://www.w3.org/TR/1998/REC-CSS2-19980512
Latest version:
http://www.w3.org/TR/REC-CSS2
Previous version:
http://www.w3.org/TR/1998/PR-CSS2-19980324
Editors:
Bert Bos
Håkon Wium Lie
Chris Lilley
Ian Jacobs
Abstract
This specification defines Cascading Style Sheets, level 2 (CSS2). CSS2 is a
style sheet language that allows authors and users to attach style (e.g., fonts,
spacing, and aural cues) to structured documents (e.g., HTML documents and
XML applications). By separating the presentation style of documents from the
content of documents, CSS2 simplifies Web authoring and site maintenance.
CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid
CSS1 style sheets are valid CSS2 style sheets. CSS2 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.
This specification also supports content positioning, downloadable fonts, table
layout, features for internationalization, automatic counters and numbering, and
some properties related to user interface.
Status of this document
This document has been reviewed by W3C Members and other interested parties
and has been endorsed by the Director as a W3C Recommendation. It is a stable
document and may be used as reference material or cited as a normative refer-
ence from another document. W3C’s role in making the Recommendation is to
draw attention to the specification and to promote its widespread deployment.
This enhances the functionality and interoperability of the Web.
1
A list of current W3C Recommendations and other technical documents can be
found at http://www.w3.org/TR.
Public discussion of CSS features takes place on www-style@w3.org.
Available formats
The CSS2 specification is available in the following formats:
HTML:
http://www.w3.org/TR/1998/REC-CSS2-19980512
a plain text file:
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt,
HTML as a gzip’ed tar file:
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz,
HTML as a zip file (this is a ’.zip’ file not an ’.exe’):
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip,
as well as a gzip’ed PostScript file:
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz,
and a PDF file:
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf.
In case of a discrepancy between the various forms of the specification,
http://www.w3.org/TR/1998/REC-CSS2-19980512 is considered the definitive
version.
Available languages
The English version of this specification is the only normative version. However,
for translations in other languages see
http://www.w3.org/Style/css2-updates/translations.html.
Errata
The list of known errors in this specification is available at
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html. Please
report errors in this document to css2-editors@w3.org.
2
Quick Table of Contents
.
.
.
.
.
.
.
.
.
.
.
13
1 About the CSS2 Specification
.
.
.
.
.
.
.
.
.
.
.
.
.
21
2 Introduction to CSS2
.
.
.
.
.
29
3 Conformance: Requirements and Recommendations
.
.
.
.
.
.
.
.
.
.
35
4 CSS2 syntax and basic data types
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
53
5 Selectors
.
.
.
.
.
69
6 Assigning property values, Cascading, and Inheritance
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
77
7 Media types
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
81
8 Box model
.
.
.
.
.
.
.
.
.
.
.
.
95
9 Visual formatting model
.
.
.
.
.
.
.
.
.
.
131
10 Visual formatting model details
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
145
11 Visual effects
.
.
.
.
.
153
12 Generated content, automatic numbering, and lists
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
175
13 Paged media
.
.
.
.
.
.
.
.
.
.
.
.
187
14 Colors and Backgrounds
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
195
15 Fonts
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
237
16 Text
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
245
17 Tables
.
.
.
.
.
.
.
.
.
.
.
.
.
.
271
18 User interface
.
.
.
.
.
.
.
.
.
.
.
.
.
.
277
19 Aural style sheets
.
.
.
.
.
.
.
291
Appendix A. A sample style sheet for HTML 4.0
.
.
.
.
.
.
.
.
.
.
293
Appendix B. Changes from CSS1
.
.
.
.
295
Appendix C. Implementation and performance notes for fonts
.
.
.
.
.
.
.
.
.
.
309
Appendix D. The grammar of CSS2
.
.
.
.
.
.
.
.
.
.
.
.
.
313
Appendix E. References
.
.
.
.
.
.
.
.
.
.
.
.
317
Appendix F. Property index
.
.
.
.
.
.
.
.
.
.
.
323
Appendix G. Descriptor index
.
.
.
.
.
.
.
.
.
.
.
.
.
.
325
Appendix H. Index
3
Full Table of Contents
.
.
.
.
.
.
.
.
.
.
.
13
1 About the CSS2 Specification
.
.
.
.
.
.
.
.
.
.
13
1.1 Reading the specification
.
.
.
.
.
.
.
.
13
1.2 How the specification is organized
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
1.3 Conventions
.
.
.
.
14
1.3.1 Document language elements and attributes
.
.
.
.
.
.
.
.
.
14
1.3.2 CSS property definitions
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
Value
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Initial
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Applies to
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Inherited
.
.
.
.
.
.
.
.
.
.
.
16
Percentage values
.
.
.
.
.
.
.
.
.
.
.
.
16
Media groups
.
.
.
.
.
.
.
.
.
.
16
1.3.3 Shorthand properties
.
.
.
.
.
.
.
.
.
.
17
1.3.4 Notes and examples
.
.
.
.
.
.
.
.
17
1.3.5 Images and long descriptions
.
.
.
.
.
.
.
.
.
.
.
.
17
1.4 Acknowledgments
.
.
.
.
.
.
.
.
.
.
.
.
.
18
1.5 Copyright Notice
.
.
.
.
.
.
.
.
.
.
.
.
.
21
2 Introduction to CSS2
.
.
.
.
.
.
.
.
.
21
2.1 A brief CSS2 tutorial for HTML
.
.
.
.
.
.
.
.
.
.
23
2.2 A brief CSS2 tutorial for XML
.
.
.
.
.
.
.
.
.
.
25
2.3 The CSS2 processing model
.
.
.
.
.
.
.
.
.
.
.
.
26
2.3.1 The canvas
.
.
.
.
.
.
.
.
.
26
2.3.2 CSS2 addressing model
.
.
.
.
.
.
.
.
.
.
.
26
2.4 CSS design principles
.
.
.
.
.
29
3 Conformance: Requirements and Recommendations
.
.
.
.
.
.
.
.
.
.
.
.
.
.
29
3.1 Definitions
.
.
.
.
.
.
.
.
.
.
.
.
.
32
3.2 Conformance
.
.
.
.
.
.
.
.
.
.
.
.
.
32
3.3 Error conditions
.
.
.
.
.
.
.
.
.
.
33
3.4 The text/css content type
.
.
.
.
.
.
.
.
.
.
35
4 CSS2 syntax and basic data types
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
35
4.1 Syntax
.
.
.
.
.
.
.
.
.
.
.
.
35
4.1.1 Tokenization
.
.
.
.
.
.
.
.
.
.
.
.
.
38
4.1.2 Keywords
.
.
.
.
.
.
.
.
.
.
38
4.1.3 Characters and case
.
.
.
.
.
.
.
.
.
.
.
.
39
4.1.4 Statements
.
.
.
.
.
.
.
.
.
.
.
.
.
39
4.1.5 At-rules
.
.
.
.
.
.
.
.
.
.
.
.
.
40
4.1.6 Blocks
.
.
.
.
40
4.1.7 Rule sets, declaration blocks, and selectors
.
.
.
.
.
.
.
.
41
4.1.8 Declarations and properties
.
.
.
.
.
.
.
.
.
.
.
.
42
4.1.9 Comments
.
.
.
.
.
.
.
.
.
42
4.2 Rules for handling parsing errors
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
43
4.3 Values
.
.
.
.
.
.
.
.
.
43
4.3.1 Integers and real numbers
.
.
.
.
.
.
.
.
.
.
.
.
.
43
4.3.2 Lengths
.
.
.
.
.
.
.
.
.
.
.
.
46
4.3.3 Percentages
4
.
.
.
.
.
.
.
.
.
.
.
46
4.3.4 URL + URN = URI
.
.
.
.
.
.
.
.
.
.
.
.
.
47
4.3.5 Counters
.
.
.
.
.
.
.
.
.
.
.
.
.
48
4.3.6 Colors
.
.
.
.
.
.
.
.
.
.
.
.
.
49
4.3.7 Angles
.
.
.
.
.
.
.
.
.
.
.
.
.
.
49
4.3.8 Times
.
.
.
.
.
.
.
.
.
.
.
.
50
4.3.9 Frequencies
.
.
.
.
.
.
.
.
.
.
.
.
.
50
4.3.10 Strings
.
.
.
.
.
.
.
.
.
50
4.4 CSS document representation
4.4.1 Referring to characters not represented in a character encod-
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
51
ing
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
53
5 Selectors
.
.
.
.
.
.
.
.
.
.
.
.
53
5.1 Pattern matching
.
.
.
.
.
.
.
.
.
.
.
.
.
55
5.2 Selector syntax
.
.
.
.
.
.
.
.
.
.
.
.
.
55
5.2.1 Grouping
.
.
.
.
.
.
.
.
.
.
.
.
55
5.3 Universal selector
.
.
.
.
.
.
.
.
.
.
.
.
.
56
5.4 Type selectors
.
.
.
.
.
.
.
.
.
.
.
56
5.5 Descendant selectors
.
.
.
.
.
.
.
.
.
.
.
.
.
57
5.6 Child selectors
.
.
.
.
.
.
.
.
.
.
57
5.7 Adjacent sibling selectors
.
.
.
.
.
.
.
.
.
.
.
.
57
5.8 Attribute selectors
.
.
.
.
.
58
5.8.1 Matching attributes and attribute values
.
.
.
.
.
.
.
59
5.8.2 Default attribute values in DTDs
.
.
.
.
.
.
.
.
.
.
.
59
5.8.3 Class selectors
.
.
.
.
.
.
.
.
.
.
.
.
.
.
60
5.9 ID selectors
.
.
.
.
.
.
.
61
5.10 Pseudo-elements and pseudo-classes
.
.
.
.
.
.
.
.
.
.
.
.
62
5.11 Pseudo-classes
.
.
.
.
.
.
.
.
.
62
5.11.1 :first-child pseudo-class
.
.
.
.
.
63
5.11.2 The link pseudo-classes: :link and :visited
.63
5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
.
.
.
.
.
.
65
5.11.4 The language pseudo-class: :lang
.
.
.
.
.
.
.
.
.
.
.
.
65
5.12 Pseudo-elements
.
.
.
.
.
.
.
65
5.12.1 The :first-line pseudo-element
.
.
.
.
.
.
.
66
5.12.2 The :first-letter pseudo-element
.
.
.
.
.
68
5.12.3 The :before and :after pseudo-elements
.
.
.
.
.
69
6 Assigning property values, Cascading, and Inheritance
.
.
.
.
.
.
.
69
6.1 Specified, computed, and actual values
.
.
.
.
.
.
.
.
.
.
.
69
6.1.1 Specified values
.
.
.
.
.
.
.
.
.
.
.
70
6.1.2 Computed values
.
.
.
.
.
.
.
.
.
.
.
.
70
6.1.3 Actual values
.
.
.
.
.
.
.
.
.
.
.
.
.
.
70
6.2 Inheritance
.
.
.
.
.
.
.
.
.
.
.
71
6.2.1 The ’inherit’ value
.
.
.
.
.
.
.
.
.
.
.
.
71
6.3 The @import rule
.
.
.
.
.
.
.
.
.
.
.
.
.
72
6.4 The cascade
.
.
.
.
.
.
.
.
.
.
.
73
6.4.1 Cascading order
.
.
.
.
.
.
.
.
.
.
.
73
6.4.2 !important rules
.
.
.
.
.
.
.
74
6.4.3 Calculating a selector’s specificity
.
.
.
.
74
6.4.4 Precedence of non-CSS presentational hints
5
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
77
7 Media types
.
.
.
.
.
.
.
.
.
.
77
7.1 Introduction to media types
.
.
.
.
.
.
.
77
7.2 Specifying media-dependent style sheets
.
.
.
.
.
.
.
.
.
.
.
78
7.2.1 The @media rule
.
.
.
.
.
.
.
.
.
.
.
78
7.3 Recognized media types
.
.
.
.
.
.
.
.
.
.
.
.
79
7.3.1 Media groups
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
81
8 Box model
.
.
.
.
.
.
.
.
.
.
.
.
.
81
8.1 Box dimensions
.
.
.
.
.
.
83
8.2 Example of margins, padding, and borders
8.3 Margin properties: ’margin-top’, ’margin-right’, ’margin-bottom’,
.
.
.
.
.
.
.
.
.
.
.
85
’margin-left’, and ’margin’
.
.
.
.
.
.
.
.
.
.
86
8.3.1 Collapsing margins
8.4 Padding properties: ’padding-top’, ’padding-right’, ’padding-bottom’,
.
.
.
.
.
.
.
.
.
.
.
87
’padding-left’, and ’padding’
.
.
.
.
.
.
.
.
.
.
.
.
88
8.5 Border properties
8.5.1 Border width: ’border-top-width’, ’border-right-width’,
.
.
88
’border-bottom-width’, ’border-left-width’, and ’border-width’
8.5.2 Border color: ’border-top-color’, ’border-right-color’,
.
.
89
’border-bottom-color’, ’border-left-color’, and ’border-color’
8.5.3 Border style: ’border-top-style’, ’border-right-style’,
.
.
90
’border-bottom-style’, ’border-left-style’, and ’border-style’
8.5.4 Border shorthand properties: ’border-top’, ’border-bottom’,
.
.
.
.
.
.
.
92
’border-right’, ’border-left’, and ’border’
.
.
.
.
.
.
.
.
.
.
.
.
95
9 Visual formatting model
.
.
.
.
.
.
95
9.1 Introduction to the visual formatting model
.
.
.
.
.
.
.
.
.
.
.
.
96
9.1.1 The viewport
.
.
.
.
.
.
.
.
.
.
.
96
9.1.2 Containing blocks
.
.
.
.
.
.
.
.
.
.
97
9.2 Controlling box generation
.
.
.
.
.
.
97
9.2.1 Block-level elements and block boxes
.
.
.
.
.
.
.
.
.
97
Anonymous block boxes
.
.
.
.
.
.
98
9.2.2 Inline-level elements and inline boxes
.
.
.
.
.
.
.
.
.
98
Anonymous inline boxes
.
.
.
.
.
.
.
.
.
.
.
99
9.2.3 Compact boxes
.
.
.
.
.
.
.
.
.
.
.
.
100
9.2.4 Run-in boxes
.
.
.
.
.
.
.
.
.
.
101
9.2.5 The ’display’ property
.
.
.
.
.
.
.
.
.
.
.
.
102
9.3 Positioning schemes
.
.
.
102
9.3.1 Choosing a positioning scheme: ’position’ property
.
.
.
.
.
.
103
9.3.2 Box offsets: ’top’, ’right’, ’bottom’, ’left’
.
.
.
.
.
.
.
.
.
.
.
.
.
.
105
9.4 Normal flow
.
.
.
.
.
.
.
.
.
105
9.4.1 Block formatting context
.
.
.
.
.
.
.
.
.
105
9.4.2 Inline formatting context
.
.
.
.
.
.
.
.
.
.
107
9.4.3 Relative positioning
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
108
9.5 Floats
.
.
.
.
.
111
9.5.1 Positioning the float: the ’float’ property
.
.
.
112
9.5.2 Controlling flow next to floats: the ’clear’ property
.
.
.
.
.
.
.
.
.
.
.
.
113
9.6 Absolute positioning
.
.
.
.
.
.
.
.
.
.
.
113
9.6.1 Fixed positioning
6
.
.
.
.
115
9.7 Relationships between ’display’, ’position’, and ’float’
.
. 115
9.8 Comparison of normal flow, floats, and absolute positioning
.
.
.
.
.
.
.
.
.
.
.
.
116
9.8.1 Normal flow
.
.
.
.
.
.
.
.
.
.
117
9.8.2 Relative positioning
.
.
.
.
.
.
.
.
.
.
.
.
118
9.8.3 Floating a box
.
.
.
.
.
.
.
.
.
.
121
9.8.4 Absolute positioning
.
.
.
.
.
.
.
.
.
.
.
125
9.9 Layered presentation
.
.
.
126
9.9.1 Specifying the stack level: the ’z-index’ property
.
. 127
9.10 Text direction: the ’direction’ and ’unicode-bidi’ properties
.
.
.
.
.
.
.
.
.
.
131
10 Visual formatting model details
.
.
.
.
.
.
.
.
.
131
10.1 Definition of "containing block"
.
.
.
.
.
.
.
.
133
10.2 Content width: the ’width’ property
.
.
.
.
.
.
.
.
.
134
10.3 Computing widths and margins
.
.
.
.
.
.
.
134
10.3.1 Inline, non-replaced elements
.
.
.
.
.
.
.
.
.
134
10.3.2 Inline, replaced elements
.
.
.
134
10.3.3 Block-level, non-replaced elements in normal flow
.
.
.
.
135
10.3.4 Block-level, replaced elements in normal flow
.
.
.
.
.
.
.
135
10.3.5 Floating, non-replaced elements
.
.
.
.
.
.
.
.
135
10.3.6 Floating, replaced elements
.
.
.
.
135
10.3.7 Absolutely positioned, non-replaced elements
.
.
.
.
.
136
10.3.8 Absolutely positioned, replaced elements
.
. 136
10.4 Minimum and maximum widths: ’min-width’ and ’max-width’
.
.
.
.
.
.
.
.
137
10.5 Content height: the ’height’ property
.
.
.
.
.
.
.
.
138
10.6 Computing heights and margins
.
.
.
.
.
.
.
139
10.6.1 Inline, non-replaced elements
10.6.2 Inline, replaced elements block-level, replaced elements in
.
.
.
.
.
.
139
normal flow, and floating, replaced elements
10.6.3 Block-level, non-replaced elements in normal flow, and float-
.
.
.
.
.
.
.
.
.
.
139
ing, non-replaced elements
.
.
.
.
139
10.6.4 Absolutely positioned, non-replaced elements
.
.
.
.
.
140
10.6.5 Absolutely positioned, replaced elements
.
140
10.7 Minimum and maximum heights: ’min-height’ and ’max-height’
10.8 Line height calculations: the ’line-height’ and ’vertical-align’ proper-
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
141
ties
.
.
.
.
.
.
.
.
.
142
10.8.1 Leading and half-leading
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
145
11 Visual effects
.
.
.
.
.
.
.
.
.
.
.
145
11.1 Overflow and clipping
.
.
.
.
.
.
.
145
11.1.1 Overflow: the ’overflow’ property
.
.
.
.
.
.
.
.
147
11.1.2 Clipping: the ’clip’ property
.
.
.
.
.
.
.
.
.
149
11.2 Visibility: the ’visibility’ property
.
.
.
.
.
153
12 Generated content, automatic numbering, and lists
.
.
.
.
.
.
.
153
12.1 The :before and :after pseudo-elements
.
.
.
.
.
.
.
.
.
.
.
155
12.2 The ’content’ property
12.3 Interaction of :before and :after with ’compact’ and ’run-in’
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
156
elements
.
.
.
.
.
.
.
.
.
.
.
.
157
12.4 Quotation marks
.
.
.
.
157
12.4.1 Specifying quotes with the ’quotes’ property
7
.
.
.
.
159
12.4.2 Inserting quotes with the ’content’ property
.
.
.
.
.
.
.
.
160
12.5 Automatic counters and numbering
.
.
.
.
.
.
.
.
162
12.5.1 Nested counters and scope
.
.
.
.
.
.
.
.
.
.
.
163
12.5.2 Counter styles
.
.
.
.
.
163
12.5.3 Counters in elements with ’display: none’
.
.
.
.
.
.
.
.
.
.
.
.
163
12.6 Markers and lists
.
.
.
.
.
.
164
12.6.1 Markers: the ’marker-offset’ property
12.6.2 Lists: the ’list-style-type’, ’list-style-image’, ’list-style-position’,
.
.
.
.
.
.
.
.
.
.
168
and ’list-style’ properties
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
175
13 Paged media
.
.
.
.
.
.
.
.
.
175
13.1 Introduction to paged media
.
.
.
.
.
.
.
.
.
176
13.2 Page boxes: the @page rule
.
.
.
.
.
.
.
.
.
.
.
176
13.2.1 Page margins
.
.
.
.
.
.
.
.
177
13.2.2 Page size: the ’size’ property
.
.
.
178
Rendering page boxes that do not fit a target sheet
.
.
.
.
.
.
178
Positioning the page box on the sheet
.
.
.
.
.
.
.
179
13.2.3 Crop marks: the ’marks’ property
.
.
.
.
.
.
.
.
179
13.2.4 Left, right, and first pages
.
.
.
.
.
.
.
.
180
13.2.5 Content outside the page box
.
.
.
.
.
.
.
.
.
.
.
.
.
180
13.3 Page breaks
13.3.1 Break before/after elements: ’page-break-before’,
.
.
.
.
.
.
.
181
’page-break-after’, ’page-break-inside’
.
.
.
.
.
.
.
.
182
13.3.2 Using named pages: ’page’
.
.
.
.
182
13.3.3 Breaks inside elements: ’orphans’, ’widows’
.
.
.
.
.
.
.
.
.
.
183
13.3.4 Allowed page breaks
.
.
.
.
.
.
.
.
.
.
184
13.3.5 Forced page breaks
.
.
.
.
.
.
.
.
.
.
184
13.3.6 "Best" page breaks
.
.
.
.
.
.
.
.
.
185
13.4 Cascading in the page context
.
.
.
.
.
.
.
.
.
.
.
.
187
14 Colors and Backgrounds
.
.
.
.
.
.
.
187
14.1 Foreground color: the ’color’ property
.
.
.
.
.
.
.
.
.
.
.
.
187
14.2 The background
14.2.1 Background properties: ’background-color’, ’back-
ground-image’, ’background-repeat’, ’background-attachment’,
.
.
.
.
.
.
.
188
’background-position’, and ’background’
.
.
.
.
.
.
.
.
.
.
.
.
193
14.3 Gamma correction
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
195
15 Fonts
.
.
.
.
.
.
.
.
.
.
.
.
.
196
15.1 Introduction
.
.
.
.
.
.
.
.
.
.
.
.
197
15.2 Font specification
.
.
.
.
.
.
.
.
198
15.2.1 Font specification properties
.
.
.
.
.
.
199
15.2.2 Font family: the ’font-family’ property
15.2.3 Font styling: the ’font-style’, ’font-variant’, ’font-weight’ and
.
.
.
.
.
.
.
.
.
.
.
200
’font-stretch’ properties
.
203
15.2.4 Font size: the ’font-size’ and ’font-size-adjust’ properties
.
.
.
.
207
15.2.5 Shorthand font property: the ’font’ property
.
.
.
.
.
.
.
.
.
.
209
15.2.6 Generic font families
.
.
.
.
.
.
.
.
.
.
.
.
.
.
210
serif
.
.
.
.
.
.
.
.
.
.
.
.
.
210
sans-serif
8
.
.
.
.
.
.
.
.
.
.
.
.
.
.
211
cursive
.
.
.
.
.
.
.
.
.
.
.
.
.
.
211
fantasy
.
.
.
.
.
.
.
.
.
.
.
.
212
monospace
.
.
.
.
.
.
.
.
.
.
.
.
.
212
15.3 Font selection
.
.
.
.
.
.
213
15.3.1 Font Descriptions and @font-face
15.3.2 Descriptors for Selecting a Font: ’font-family’, ’font-style’,
.
.
.
215
’font-variant’, ’font-weight’, ’font-stretch’ and ’font-size’
.
217
15.3.3 Descriptors for Font Data Qualification: ’unicode-range’
.
.
.
.
218
15.3.4 Descriptor for Numeric Values: ’units-per-em’
.
.
.
.
.
.
.
218
15.3.5 Descriptor for Referencing: ’src’
15.3.6 Descriptors for Matching: ’panose-1’, ’stemv’, ’stemh’,
.
.
.
220
’slope’, ’cap-height’, ’x-height’, ’ascent’, and ’descent’
222
15.3.7 Descriptors for Synthesis: ’widths’, ’bbox’ and ’definition-src’
15.3.8 Descriptors for Alignment: ’baseline’, ’centerline’, ’mathline’,
.
.
.
.
.
.
.
.
.
.
.
.
.
223
and ’topline’
.
.
.
.
.
.
.
.
.
.
.
.
224
15.3.9 Examples
.
.
.
.
.
.
.
.
.
.
.
226
15.4 Font Characteristics
.
.
.
.
.
.
.
226
15.4.1 Introducing Font Characteristics
.
.
.
.
.
.
.
.
.
.
.
226
15.4.2 Full font name
.
.
.
.
.
.
227
15.4.3 Coordinate units on the em square
.
.
.
.
.
.
.
.
.
.
.
227
15.4.4 Central Baseline
.
.
.
.
.
.
.
.
.
.
.
227
15.4.5 Font Encoding
.
.
.
.
.
.
.
.
.
.
228
15.4.6 Font family name
.
.
.
.
.
.
.
.
.
.
.
.
228
15.4.7 Glyph widths
.
.
.
.
.
.
.
.
.
228
15.4.8 Horizontal stem width
.
.
.
.
.
.
.
.
228
15.4.9 Height of uppercase glyphs
.
.
.
.
.
.
.
.
228
15.4.10 Height of lowercase glyphs
.
.
.
.
.
.
.
.
.
.
.
229
15.4.11 Lower Baseline
.
.
.
.
.
.
.
.
.
229
15.4.12 Mathematical Baseline
.
.
.
.
.
.
.
.
.
229
15.4.13 Maximal bounding box
.
.
.
.
.
.
.
229
15.4.14 Maximum unaccented height
.
.
.
.
.
.
.
229
15.4.15 Maximum unaccented depth
.
.
.
.
.
.
.
.
.
.
230
15.4.16 Panose-1 number
.
.
.
.
.
.
.
230
15.4.17 Range of ISO 10646 characters
.
.
.
.
.
.
.
.
.
.
.
230
15.4.18 Top Baseline
.
.
.
.
.
.
.
.
.
.
231
15.4.19 Vertical stem width
.
.
.
.
.
.
.
.
.
231
15.4.20 Vertical stroke angle
.
.
.
.
.
.
.
.
.
.
231
15.5 Font matching algorithm
.
.
.
.
.
233
15.5.1 Mapping font weight values to font names
.
.
.
.
.
.
.
.
234
15.5.2 Examples of font matching
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
237
16 Text
.
.
.
.
.
.
.
237
16.1 Indentation: the ’text-indent’ property
.
.
.
.
.
.
.
.
238
16.2 Alignment: the ’text-align’ property
.
.
.
.
.
.
.
.
.
.
.
.
.
.
238
16.3 Decoration
16.3.1 Underlining, overlining, striking, and blinking: the ’text-deco-
.
.
.
.
.
.
.
.
.
.
.
.
.
239
ration’ property
.
.
.
.
.
239
16.3.2 Text shadows: the ’text-shadow’ property
9
16.4 Letter and word spacing: the ’letter-spacing’ and ’word-spacing’
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
241
properties
.
.
.
.
.
.
242
16.5 Capitalization: the ’text-transform’ property
.
.
.
.
.
.
.
243
16.6 Whitespace: the ’white-space’ property
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
245
17 Tables
.
.
.
.
.
.
.
.
.
.
.
245
17.1 Introduction to tables
.
.
.
.
.
.
.
.
.
.
.
247
17.2 The CSS table model
.
.
.
.
.
.
.
.
.
248
17.2.1 Anonymous table objects
.
.
.
.
.
.
.
.
.
.
.
.
249
17.3 Column selectors
.
.
.
.
.
.
.
250
17.4 Tables in the visual formatting model
.
.
.
.
.
.
.
251
17.4.1 Caption position and alignment
.
.
.
.
.
.
.
.
.
253
17.5 Visual layout of table contents
.
.
.
.
.
.
.
254
17.5.1 Table layers and transparency
.
.
.
256
17.5.2 Table width algorithms: the ’table-layout’ property
.
.
.
.
.
.
.
.
.
.
.
257
Fixed table layout
.
.
.
.
.
.
.
.
.
.
257
Automatic table layout
.
.
.
.
.
.
.
.
.
258
17.5.3 Table height algorithms
.
.
.
.
.
.
.
260
17.5.4 Horizontal alignment in a column
.
.
.
.
.
.
.
261
17.5.5 Dynamic row and column effects
.
.
.
.
.
.
.
.
.
.
.
.
.
.
261
17.6 Borders
.
.
.
.
.
.
.
261
17.6.1 The separated borders model
.
. 262
Borders around empty cells: the ’empty-cells’ property
.
.
.
.
.
.
.
.
263
17.6.2 The collapsing border model
.
.
.
.
.
.
.
.
.
264
Border conflict resolution
.
.
.
.
.
.
.
.
.
.
.
.
266
17.6.3 Border styles
.
.
.
.
.
.
.
.
.
.
267
17.7 Audio rendering of tables
.
.
.
267
17.7.1 Speaking headers: the ’speak-header’ property
.
.
.
.
.
.
.
.
.
.
.
.
.
.
271
18 User interface
.
.
.
.
.
.
.
.
.
271
18.1 Cursors: the ’cursor’ property
.
.
.
.
.
.
.
.
.
.
272
18.2 User preferences for colors
.
.
.
.
.
.
.
.
.
.
274
18.3 User preferences for fonts
.
.
.
.
.
.
.
274
18.4 Dynamic outlines: the ’outline’ property
.
.
.
.
.
.
.
.
.
275
18.4.1 Outlines and the focus
.
.
.
.
.
.
.
.
.
.
.
.
.
276
18.5 Magnification
.
.
.
.
.
.
.
.
.
.
.
.
.
.
277
19 Aural style sheets
.
.
.
.
.
.
.
.
277
19.1 Introduction to aural style sheets
.
.
.
.
.
.
.
.
.
278
19.2 Volume properties: ’volume’
.
.
.
.
.
.
.
.
.
279
19.3 Speaking properties: ’speak’
.
. 279
19.4 Pause properties: ’pause-before’, ’pause-after’, and ’pause’
.
.
.
.
281
19.5 Cue properties: ’cue-before’, ’cue-after’, and ’cue’
.
.
.
.
.
.
.
.
.
282
19.6 Mixing properties: ’play-during’
.
.
.
.
.
.
283
19.7 Spatial properties: ’azimuth’ and ’elevation’
19.8 Voice characteristic properties: ’speech-rate’, ’voice-family’, ’pitch’,
.
.
.
.
.
.
.
.
.
285
’pitch-range’, ’stress’, and ’richness’
.
. 288
19.9 Speech properties: ’speak-punctuation’ and ’speak-numeral’
.
.
.
.
.
.
.
291
Appendix A. A sample style sheet for HTML 4.0
.
.
.
.
.
.
.
.
.
.
293
Appendix B. Changes from CSS1
10
.
.
.
.
.
.
.
.
.
.
.
.
293
B.1 New functionality
.
.
.
.
.
.
.
.
.
.
.
294
B.2 Updated descriptions
.
.
.
.
.
.
.
.
.
294
B.3 Semantic changes from CSS1
.
.
.
.
295
Appendix C. Implementation and performance notes for fonts
.
.
.
.
.
.
.
.
.
.
.
295
C.1 Glossary of font terms
.
.
.
.
.
.
.
.
.
.
.
.
.
299
C.2 Font retrieval
.
.
.
.
.
.
.
.
.
299
C.3 Meaning of the Panose Digits
.
.
.
.
.
.
.
302
C.4 Deducing Unicode Ranges for TrueType
.
.
.
.
.
.
.
.
.
305
C.5 Automatic descriptor generation
.
.
.
.
.
.
.
.
.
.
309
Appendix D. The grammar of CSS2
.
.
.
.
.
.
.
.
.
.
.
.
.
.
309
D.1 Grammar
.
.
.
.
.
.
.
.
.
.
.
.
.
311
D.2 Lexical scanner
.
.
.
.
.
312
D.3 Comparison of tokenization in CSS2 and CSS1
.
.
.
.
.
.
.
.
.
.
.
.
.
313
Appendix E. References
.
.
.
.
.
.
.
.
.
.
.
313
E.1 Normative references
.
.
.
.
.
.
.
.
.
.
.
315
E.2 Informative references
.
.
.
.
.
.
.
.
.
.
.
.
317
Appendix F. Property index
.
.
.
.
.
.
.
.
.
.
.
323
Appendix G. Descriptor index
.
.
.
.
.
.
.
.
.
.
.
.
.
.
325
Appendix H. Index
Copyright [p. 18] © 1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.
11
12
1 About the CSS2 Specification
Contents
.
.
.
.
.
.
.
.
.
.
.
.
13
1.1 Reading the specification
.
.
.
.
.
.
.
.
.
13
1.2 How the specification is organized
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
1.3 Conventions
.
.
.
.
.
14
1.3.1 Document language elements and attributes
.
.
.
.
.
.
.
.
.
.
14
1.3.2 CSS property definitions
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
Value
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Initial
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Applies to
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Inherited
.
.
.
.
.
.
.
.
.
.
.
.
16
Percentage values
.
.
.
.
.
.
.
.
.
.
.
.
.
16
Media groups
.
.
.
.
.
.
.
.
.
.
.
16
1.3.3 Shorthand properties
.
.
.
.
.
.
.
.
.
.
.
17
1.3.4 Notes and examples
.
.
.
.
.
.
.
.
.
17
1.3.5 Images and long descriptions
.
.
.
.
.
.
.
.
.
.
.
.
.
17
1.4 Acknowledgments
.
.
.
.
.
.
.
.
.
.
.
.
.
.
18
1.5 Copyright Notice
1.1 Reading the specification
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 conforming user agents [p. 32] . 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.
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.
1.2 How the specification is organized
The specification is organized into the following sections:
13
Section 2: An introduction to CSS2
The introduction includes a brief tutorial on CSS2 and a discussion of design
principles behind CSS2.
Sections 3 - 20: CSS2 reference manual.
The bulk of the reference manual consists of the CSS2 language reference.
This reference defines what may go into a CSS2 style sheet (syntax, proper-
ties, property values) and how user agents must interpret these style sheets
in order to claim conformance [p. 32] .
Appendixes:
Appendixes contain information about a sample style sheet for HTML 4.0
[p. 291] , changes from CSS1 [p. 293] , implementation and performance
notes [p. 295] , the grammar of CSS2 [p. 309] , a list of normative and infor-
mative references [p. 313] , and three indexes: one for properties [p. 317] ,
one for descriptors [p. 323] , and one general index [p. 325] .
1.3 Conventions
1.3.1 Document language elements and attributes
CSS property, descriptor, and pseudo-class names are delimited by single
quotes.
CSS values are delimited by single quotes.
Document language element names are in uppercase letters.
Document language attribute names are in lowercase letters and delimited
by double quotes.
1.3.2 CSS property definitions
Each CSS property definition begins with a summary of key information that
resembles the following:
’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
Value
This part specifies the set of valid values for the property. Value types may be
designated in several ways:
1. keyword values (e.g., auto, disc, etc.)
2. basic data types, which appear between "<" and ">" (e.g.,
of a basic data type links to its definition.
3. types that have the same range of values as a property bearing the same
14
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’>). In the electronic version of the document, each
instance of this type of non-terminal links to the corresponding property defi-
nition.
4. non-terminals that do not share the same name as a property. In this case,
the non-terminal name appears between "<" and ">", as in
Notice the distinction between
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 correspond-
ing value definition.
Other words in these definitions are keywords that must appear literally,
without quotes (e.g., red). The slash (/) and the comma (,) must also appear liter-
ally.
Values may be arranged as follows:
Several juxtaposed words mean that all of them must occur, in the given
order.
A bar (|) separates two or more alternatives: exactly one of them must occur.
A double bar (||) separates two or more options: one or more of them must
occur, in any order.
Brackets ([ ]) are for grouping.
Juxtaposition is stronger than the double bar, and the double bar is stronger
than the bar. Thus, the following lines are equivalent:
a b | c || d e
[ a b ] | [ c || [ d e ]]
Every type, keyword, or bracketed group may be followed by one of the follow-
ing modifiers:
An asterisk (*) indicates that the preceding type, word, or group occurs zero
or more times.
A plus (+) indicates that the preceding type, word, or group occurs one or
more times.
A question mark (?) indicates that the preceding type, word, or group is
optional.
A pair of numbers in curly braces ({A,B}) indicates that the preceding type,
word, or group occurs at least A and at most B times.
The following examples illustrate different value types:
Value: N | NW | NE
Value: [
Value: [
Value:
Value:
15
Initial
This part specifies the property’s initial value. If the property is inherited, this is
the value that is given to the root element of the document tree [p. 30] . Please
consult the section on the cascade [p. 69] for information about the interaction
between style sheet-specified, inherited, and initial values.
Applies to
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, ’white-space’ only affects block-level
elements.
Inherited
This part indicates whether the value of the property is inherited from an ancestor
element. Please consult the section on the cascade [p. 69] for information about
the interaction between style sheet-specified, inherited, and initial values.
Percentage values
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 as values.
Media groups
This part indicates the media groups [p. 79] to which the property applies. The
conformance [p. 29] conditions state that user agents must support this property
if they support rendering to the media types [p. 78] included in these media
groups [p. 79] .
1.3.3 Shorthand properties
Some properties are shorthand properties, meaning they allow authors to specify
the values of several properties with a single property.
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.
When values are omitted from a shorthand form, each "missing" property is
assigned its initial value (see the section on the cascade [p. 69] ).
Example(s):
The multiple style rules of this example:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
16
may be rewritten with a single shorthand property:
H1 { font: bold 12pt/14pt Helvetica }
In this example, ’font-variant’, ’font-stretch’, ’font-size-adjust’, and ’font-style’
take their initial values.
1.3.4 Notes and examples
All examples that illustrate illegal usage are clearly marked as "ILLEGAL
EXAMPLE".
All HTML examples conform to the HTML 4.0 strict DTD (defined in [HTML40])
unless otherwise indicated by a document type declaration.
All notes are informative only.
Examples and notes are marked within the source HTML for the specification
and CSS1 user agents will render them specially.
1.3.5 Images and long descriptions
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]" to the right of the image.
Images and long descriptions are informative only.
1.4 Acknowledgments
This specification is the product of the W3C Working Group on Cascading Style
Sheets and Formatting Properties. In addition to the editors of this specification,
the members of the Working Group are: Brad Chase (Bitstream), Chris Wilson
(Microsoft), Daniel Glazman (Electricité de France), Dave Raggett (W3C/HP), Ed
Tecot (Microsoft), Jared Sorensen (Novell), Lauren Wood (SoftQuad), Laurie
Anna Kaplan (Microsoft), Mike Wexler (Adobe), Murray Maloney (Grif), Powell
Smith (IBM), Robert Stevahn (HP), Steve Byrne (JavaSoft), Steven Pemberton
(CWI), Thom Phillabaum (Netscape), Douglas Rand (Silicon Graphics), Robert
Pernett (Lotus), Dwayne Dicks (SoftQuad), and Sho Kuwamoto (Macromedia).
We thank them for their continued efforts.
A number of invited experts to the Working Group have contributed: George
Kersher, Glenn Rippel (Bitstream), Jeff Veen (HotWired), Markku T. Hakkinen
(The Productivity Works), Martin Dürst (W3C, formerly Universität Zürich), Roy
Platon (RAL), Todd Fahrner (Verso), Tim Boland (NIST), Eric Meyer (Case
Western Reserve University), and Vincent Quint (W3C).
The section on Web Fonts was strongly shaped by Brad Chase (Bitstream)
David Meltzer (Microsoft Typography) and Steve Zilles (Adobe). The following
people have also contributed in various ways to the section pertaining to fonts:
Alex Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP), Dave
Raggett (W3C/HP), David Opstad (Apple), David Goldsmith (Apple), Ed Tecot
(Microsoft), Erik van Blokland (LettError), François Yergeau (Alis), Gavin Nicol
(Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul
Haeberli (SGI), and the late Phil Karlton (Netscape).
17
The section on Paged Media was in large parts authored by Robert Stevahn
(HP) and Stephen Waters (Microsoft).
Robert Stevahn (HP), Scott Furman (Netscape), and Scott Isaacs (Microsoft)
were key contributors to CSS Positioning.
Mike Wexler (Adobe) was the editor of the interim working draft, which
described many of the new features of CSS2.
T.V. Raman (Adobe) made pivotal contributions towards Aural Cascading Style
Sheets (ACSS) and the concepts of aural presentation based on his work on
AsTeR (Audio System For Technical Readings). He contributed an initial draft of
the ACSS specification that shaped the current specification. Values for aural
properties in the HTML 4.0 sample style sheet [p. 291] are of his devising; he
currently uses them on a daily basis on his audio desktop in conjunction with
Emacspeak and the Emacs W3 browser (authored by William Perry, who also
implemented the aural extensions on the W3 side of the fence).
Todd Fahrner (Verso) researched contemporary and historical browsers to
develop the sample style sheet in the appendix.
Thanks to Jan Kärrman, author of html2ps for helping so much in creating the
PostScript version of the specification.
Through electronic and physical encounters, the following people have
contributed to the development of CSS2: Alan Borning, Robert Cailliau, Liz
Castro, James Clark, Dan Connolly, Donna Converse, Daniel Dardailler, Al
Gilman, Daniel Greene, Scott Isaacs, Geir Ivarsøy, Vincent Mallet, Kim Marriott,
Brian Michalowski, Lou Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Eva von
Pepel, William Perry, David Siegel, Peter Stuckey, and Jason White.
The discussions on www-style@w3.org have been influential in many key
issues for CSS. Especially, we would like to thank Bjorn Backlund, Todd Fahrner,
Lars Marius Garshol, Sue Jordan, Ian Hickson, Susan Lesch, Andrew Marshall,
MegaZone, Eric Meyer, Russell O’Connor, David Perrell, Liam Quinn, Jon
Seymour, Neil St. Laurent, Taylor, Brian Wilson, and Chris Wilson for their partic-
ipation.
Many thanks to the Web Accessibility Initiative Protocols and Formats Techni-
cal Review Working Group (WAI PF) for helping to improve the accessibility of
CSS2.
Many thanks to Philippe Le Hégaret, whose CSS validator helped ensure
correct examples and a sensible grammar.
Special thanks to Arnaud Le Hors, whose engineering contributions made this
document work.
Adam Costello improved this specification by performing a detailed review.
Lastly, thanks to Tim Berners-Lee without whom none of this would have been
possible.
1.5 Copyright Notice
Copyright © 1997 World Wide Web Consortium, (Massachusetts Institute of
Technology, Institut National de Recherche en Informatique et en Automa-
tique, Keio University). All Rights Reserved.
Documents on the W3C site are provided by the copyright holders under the
following license. By obtaining, using and/or copying this document, or the W3C
document from which this statement is linked, you agree that you have read,
understood, and will comply with the following terms and conditions:
18
Permission to use, copy, and distribute the contents of this document, or the
W3C document from which this statement is linked, in any medium for any
purpose and without fee or royalty is hereby granted, provided that you include
the following on ALL copies of the document, or portions thereof, that you use:
1. A link or URI to the original W3C document.
2. The pre-existing copyright notice of the original author, if it doesn’t exist, a
notice of the form: "Copyright © World Wide Web Consortium,
(Massachusetts Institute of Technology, Institut National de Recherche en
Informatique et en Automatique, Keio University). All Rights Reserved."
3. If it exists, the STATUS of the W3C document.
When space permits, inclusion of the full text of this NOTICE should be
provided. In addition, credit shall be attributed to the copyright holders for any
software, documents, or other items or products that you create pursuant to the
implementation of the contents of this document, or any portion thereof.
No right to create modifications or derivatives is granted pursuant to this
license.
THIS DOCUMENT IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS
MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED,
INCLUDING, BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR TITLE;
THAT THE CONTENTS OF THE DOCUMENT ARE SUITABLE FOR ANY
PURPOSE; NOR THAT THE IMPLEMENTATION OF SUCH CONTENTS WILL
NOT INFRINGE ANY THIRD PARTY PATENTS, COPYRIGHTS, TRADE-
MARKS OR OTHER RIGHTS.
COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDI-
RECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF ANY
USE OF THE DOCUMENT OR THE PERFORMANCE OR IMPLEMENTATION
OF THE CONTENTS THEREOF.
The name and trademarks of copyright holders may NOT be used in advertis-
ing or publicity pertaining to this document or its contents without specific, written
prior permission. Title to copyright in this document will at all times remain with
copyright holders.
19
20
2 Introduction to CSS2
Contents
.
.
.
.
.
.
.
.
.
.
21
2.1 A brief CSS2 tutorial for HTML
.
.
.
.
.
.
.
.
.
.
.
23
2.2 A brief CSS2 tutorial for XML
.
.
.
.
.
.
.
.
.
.
.
25
2.3 The CSS2 processing model
.
.
.
.
.
.
.
.
.
.
.
.
.
26
2.3.1 The canvas
.
.
.
.
.
.
.
.
.
.
26
2.3.2 CSS2 addressing model
.
.
.
.
.
.
.
.
.
.
.
.
26
2.4 CSS design principles
2.1 A brief CSS2 tutorial for HTML
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 [HTML40]) and some basic
desktop publishing terminology.
We begin with a small HTML document:
Bach’s home page
Johann Sebastian Bach was a prolific composer.
To set the text color of the H1 elements to blue, you can write the following
CSS rule:
H1 { color: blue }
A CSS rule consists of two main parts: selector [p. 53] (’H1’) and declaration
(’color: blue’). The declaration has two parts: property (’color’) and value (’blue’).
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) it will determine the final presentation of the document.
The HTML 4.0 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:
21
Bach’s home page
Johann Sebastian Bach was a prolific composer.
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:
Bach’s home page
Johann Sebastian Bach was a prolific composer.
The LINK element specifies:
the type of link: to a "stylesheet".
the location of the style sheet via the "ref" attribute.
the type of style sheet being linked: "text/css".
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:
Bach’s home page
Johann Sebastian Bach was a prolific composer.
The style sheet now contains two rules: the first one sets the color of the
BODY element to ’red’, while the second one sets the color of the H1 element to
’blue’. Since no color value 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.
22
CSS2 has more than 100 different properties, including ’color’. Let’s look at
some of the others:
Bach’s home page
Johann Sebastian Bach was a prolific composer.
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.
The first declaration on the BODY element sets the font family to "Gill Sans". If
that font isn’t 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.
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.
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.
2.2 A brief CSS2 tutorial for XML
CSS can be used with any structured document format, for example with applica-
tions 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 don’t know how to display.
Here is a simple XML fragment:
One evening, just as he was getting his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
23
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).
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
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.
One proposal for linking a style sheet to an XML document is to use a process-
ing instruction:
One evening, just as he was getting his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
A visual user agent could format the above example as:
Fredrick the Great meets Bach
Johann Nikolaus Forkel
One evening, just as he was getting his flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
Notice that the word "flute" remains within the paragraph since it is the content
of the inline element INSTRUMENT.
Still, the text isn’t formatted the way you would expect. For example, the head-
line font size should be larger than then rest of the text, and you may want to
display the author’s name in italic:
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 }
A visual user agent could format the above example as:
Fredrick the Great meets Bach
Johann Nikolaus Forkel
One evening, just as he was getting his flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
24
Adding more rules to the style sheet will allow you to further improve the
presentation of the document.
2.3 The CSS2 processing model
This section presents one possible model of how user agents that support CSS
work. This is only a conceptual model; real implementations may vary.
In this model, a user agent processes a source by going through the following
steps:
1. Parse the source document and create a document tree [p. 30] .
2. Identify the target media type [p. 77] .
3. Retrieve all style sheets associated with the document that are specified for
the target media type [p. 77] .
4. Annotate every element of the document tree by assigning a single value to
every property [p. 41] that is applicable to the target media type [p. 77] .
Properties are assigned values according to the mechanisms described in
the section on cascading and inheritance [p. 69] .
Part of the calculation of values depends on the formatting algorithm
appropriate for the target media type [p. 77] . For example, if the target
medium is the screen, user agents apply the visual formatting model [p. 95] .
If the destination medium is the printed page, user agents apply the page
model [p. 175] . If the destination medium is an aural rendering device (e.g.,
speech synthesizer), user agents apply the aural rendering model [p. 277] .
5. From the annotated document tree, generate a formatting structure. Often,
the formatting structure closely resembles the document tree, but it may also
differ significantly, notably when authors make use of pseudo-elements and
generated content. First, the formatting structure need not be "tree-shaped"
at all -- the nature of the structure depends on the implementation. Second,
the formatting structure may contain more or less information than the docu-
ment tree. For instance, if an element in the document tree has a value of
’none’ for the ’display’ property, that element will generate nothing in the
formatting structure. A list element, on the other hand, may generate more
information in the formatting structure: the list element’s content and list style
information (e.g., a bullet image).
Note that the CSS user agent does not alter the document tree during this
phase. In particular, content generated due to style sheets is not fed back to
the document language processor (e.g., for reparsing).
6. Transfer the formatting structure to the target medium (e.g., print the results,
display them on the screen, render them as speech, etc.).
Step 1 lies outside the scope of this specification (see, for example, [DOM]).
Steps 2-5 are addressed by the bulk of this specification.
Step 6 lies outside the scope of this specification.
25
2.3.1 The canvas
For all media, the term canvas describes "the space where the formatting struc-
ture is rendered." The canvas is infinite for each dimension of the space, but
rendering generally occurs within a finite region of the canvas, established by the
user agent according to the target medium. For instance, user agents rendering
to a screen generally impose a minimum width and choose an initial width based
on the dimensions of the viewport [p. 96] . User agents rendering to a page
generally impose width and height constraints. Aural user agents may impose
limits in audio space, but not in time.
2.3.2 CSS2 addressing model
CSS2 selectors [p. 53] and properties allow style sheets to refer to the following
parts of a document or user agent:
Elements in the document tree and certain relationships between them (see
the section on selectors [p. 53] ).
Attributes of elements in the document tree, and values of those attributes
(see the section on attribute selectors [p. 57] ).
Some parts of element content (see the :first-line [p. 66] and :first-letter
[p. 66] pseudo-elements.
Elements of the document tree when they are in a certain state (see the
section on pseudo-classes [p. 61] ).
Some aspects of the canvas [p. 26] where the document will be rendered.
Some system information (see the section on user interface [p. 271] ).
2.4 CSS design principles
CSS2, as CSS1 before it, is based on a set of design principles:
Forward and backward compatibility. CSS2 user agents will be able to
understand CSS1 style sheets. CSS1 user agents will be able to read CSS2
style sheets and discard parts they don’t understand. Also, user agents with
no CSS support will be able to display style-enhanced documents. Of
course, the stylistic enhancements made possible by CSS will not be
rendered, but all content will be presented.
Complementary to structured documents. Style sheets complement
structured documents (e.g., HTML and XML applications), providing stylistic
information for the marked-up text. It should be easy to change the style
sheet with little or no impact on the markup.
Vendor, platform, and device independence. Style sheets enable docu-
ments to remain vendor, platform, and device independent. Style sheets
themselves are also vendor and platform independent, but CSS2 allows you
to target a style sheet for a group of devices (e.g., printers).
Maintainability. By pointing to style sheets from documents, webmasters
can simplify site maintenance and retain consistent look and feel throughout
the site. For example, if the organization’s background color changes, only
one file needs to be changed.
26
Simplicity. CSS2 is more complex than CSS1, but it remains a simple style
language which is human readable and writable. The CSS properties are
kept independent of each other to the largest extent possible and there is
generally only one way to achieve a certain effect.
Network performance. CSS provides for compact encodings of how to
present content. Compared to images or audio files, which are often used by
authors to achieve certain rendering effects, style sheets most often
decrease the content size. Also, fewer network connections have to be
opened which further increases network performance.
Flexibility. CSS can be applied to content in several ways. The key feature
is the ability to cascade style information specified in the default (user agent)
style sheet, user style sheets, linked style sheets, the document head, and in
attributes for the elements forming the document body.
Richness. Providing authors with a rich set of rendering effects increases
the richness of the Web as a medium of expression. Designers have been
longing for functionality commonly found in desktop publishing and
slide-show applications. Some of the requested rendering effects conflict
with device independence, but CSS2 goes a long way toward granting
designers their requests.
Alternative language bindings. The set of CSS properties described in this
specification form a consistent formatting model for visual and aural presen-
tations. This formatting model can be accessed through the CSS language,
but bindings to other languages are also possible. For example, a JavaScript
program may dynamically change the value of a certain element’s ’color’
property.
Accessibility. Several CSS features will make the Web more accessible to
users with disabilities:
Properties to control font appearance allow authors to eliminate inac-
cessible bit-mapped text images.
Positioning properties allow authors to eliminate mark-up tricks (e.g.,
invisible images) to force layout.
The semantics of !important rules mean that users with particular
presentation requirements can override the author’s style sheets.
The new ’inherit’ value for all properties improves cascading generality
and allows for easier and more consistent style tuning.
Improved media support, including media groups and the braille,
embossed, and tty media types, will allow users and authors to tailor
pages to those devices.
Aural properties give control over voice and audio output.
The attribute selectors, ’attr()’ function, and ’content’ property give
access to alternate content.
Counters and section/paragraph numbering can improve document
navigability and save on indenting spacing (important for braille
devices). The ’word-spacing’ and ’text-indent’ properties also eliminate
the need for extra whitespace in the document.
Note. For more information about designing accessible documents using
CSS and HTML, please consult [WAI-PAGEAUTH].
27
28
3 Conformance: Requirements and Recom-
mendations
Contents
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
29
3.1 Definitions
.
.
.
.
.
.
.
.
.
.
.
.
.
.
32
3.2 Conformance
.
.
.
.
.
.
.
.
.
.
.
.
.
.
32
3.3 Error conditions
.
.
.
.
.
.
.
.
.
.
.
.
33
3.4 The text/css content type
3.1 Definitions
In this section, we begin the formal specification of CSS2, starting with the
contract between authors, users, and implementers.
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT",
"SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in
this document are to be interpreted as described in RFC 2119 (see [RFC2119]).
However, for readability, these words do not appear in all uppercase letters in
this specification.
At times, this specification recommends good practice for authors and user
agents. These recommendations are not normative and conformance with this
specification does not depend on their realization. These recommendations
contain the expression "We recommend ...", "This specification recommends ...",
or some similar wording.
Style sheet
A set of statements that specify presentation of a document.
Style sheets may have three different origins: author [p. 31] , user [p. 31] ,
and user agent [p. 31] . The interaction of these sources is described in the
section on cascading and inheritance [p. 69] .
Valid style sheet
The validity of a style sheet depends on the level of CSS used for the style
sheet. All valid CSS1 style sheets are valid CSS2 style sheets. However,
some changes from CSS1 [p. 294] mean that a few CSS1 style sheets will
have slightly different semantics in CSS2.
A valid CSS2 style sheet must be written according to the grammar of
CSS2 [p. 309] . Furthermore, it must contain only at-rules, property names,
and property values defined in this specification. An illegal (invalid) at-rule,
property name, or property value is one that is not valid.
Source document
The document to which one or more style sheets refer. This is encoded in
some language that represents the document as a tree of elements [p. 30] .
Each element consists of a name that identifies the type of element, option-
ally a number of attributes [p. 30] , and a (possibly empty) content [p. 30] .
29
Document language
The encoding language of the source document (e.g., HTML or an XML
application).
Element
(An SGML term, see [ISO8879].) The primary syntactic constructs of the
document language. Most CSS style sheet rules use the names of these
elements (such as "P", "TABLE", and "OL" for HTML) to specify rendering
information for them.
Replaced element
An element for which the CSS formatter knows only the intrinsic dimensions.
In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements can
be examples of replaced elements. For example, the content of the IMG
element is often replaced by the image that the "src" attribute designates.
CSS does not define how the intrinsic dimensions are found.
Intrinsic dimensions
The width and height as defined by the element itself, not imposed by the
surroundings. In CSS2 it is assumed that all replaced elements -- and only
replaced elements -- come with intrinsic dimensions.
Attribute
A value associated with an element, consisting of a name, and an associ-
ated (textual) value.
Content
The content associated with an element in the source document; not all
elements have content in which case they are called empty. The content of
an element may include text, and it may include a number of sub-elements,
in which case the element is called the parent of those sub-elements.
Rendered content
The content of an element after the rendering that applies to it according to
the relevant style sheets has been applied. The rendered content of a
replaced element [p. 30] comes from outside the source document.
Rendered content may also be alternate text for an element (e.g., the value
of the HTML "alt" attribute), and may include items inserted implicitly or
explicitly by the style sheet, such as bullets, numbering, etc.
Document tree
The tree of elements encoded in the source document. Each element in this
tree has exactly one parent, with the exception of the root element, which
has none.
Child
An element A is called the child of element B if an only if B is the parent of A.
Descendant
An element A is called a descendant of an element B, if either (1) A is a child
of B, or (2) A is the child of some element C that is a descendant of B.
Ancestor
An element A is called an ancestor of an element B, if and only if B is a
descendant of A.
Sibling
An element A is called a sibling of an element B, if and only if B and A share
the same parent element. Element A is a preceding sibling if it comes before
B in the document tree. Element B is a following sibling if it comes after B in
the document tree.
30
Preceding element
An element A is called a preceding element of an element B, if and only if (1)
A is an ancestor of B or (2) A is a preceding sibling of B.
Following element
An element A is called a following element of an element B, if and only if B is
a preceding element of A.
Author
An author is a person who writes documents and associated style sheets.
An authoring tool generates documents and associated style sheets.
User
A user is a person who interacts with a user agent to view, hear, or other-
wise use a document and its associated style sheet. The user may provide a
personal style sheet that encodes personal preferences.
User agent (UA)
A user agent is any program that interprets a document written in the docu-
ment language and applies associated style sheets according to the terms of
this specification. A user agent may display a document, read it aloud, cause
it to be printed, convert it to another format, etc.
Here is an example of a source document encoded in HTML:
My home page
Welcome to my home page! Let me tell you about my favorite
composers:
- Elvis Costello
- Johannes Brahms
- Georges Brassens
This results in the following tree:
HTML
HEAD
TITLE
BODY
P
UL
LI
H1
LI
LI
According to the definition of HTML, HEAD elements will be inferred during
parsing and become part of the document tree even if the HEAD tags are not in
the document source. Similarly, the parser knows where the P and LIs end, even
though there are no and tags in the source.
31
3.2 Conformance
This section defines conformance with the CSS2 specification only. There may
be other levels of CSS in the future that may require a user agent to implement a
different set of features in order to conform.
In general, the following points must be observed by a user agent claiming
conformance to this specification:
1. It must support one or more of the CSS2 media types [p. 77] .
2. For each source document, it must attempt to retrieve all associated style
sheets that are appropriate for the supported media types. If it cannot
retrieve all associated style sheets (for instance, because of network errors),
it must display the document using those it can retrieve.
3. It must parse the style sheets according to this specification. In particular, it
must recognize all at-rules, blocks, declarations, and selectors (see the
grammar of CSS2 [p. 309] ). If a user agent encounters a property that
applies for a supported media type, the user agent must parse the value
according to the property definition. This means that the user agent must
accept all valid values and must ignore declarations with invalid values. User
agents must ignore rules that apply to unsupported media types [p. 77] .
4. For each element in a document tree [p. 30] , it must assign a value for
every applicable property according to the property’s definition and the rules
of cascading and inheritance [p. 69] .
5. If the source document comes with alternate style sheets (such as with the
"alternate" keyword in HTML 4.0 [HTML40]), the UA must allow the user to
select one from among these style sheets and apply the selected one.
Not every user agent must observe every point, however:
A user agent that inputs style sheets must respect points 1 - 3.
An authoring tool is only required to output valid style sheets [p. 29]
A user agent that renders a document with associated style sheets must
respect points 1 - 5 and render the document according to the
media-specific requirements set forth in this specification. Values [p. 70] may
be approximated when required by the user agent.
The inability of a user agent to implement part of this specification due to the
limitations of a particular device (e.g., a user agent cannot render colors on a
monochrome monitor or page) does not imply non-conformance.
This specification recommends that a user agent allow the user to specify user
style sheets.
3.3 Error conditions
In general, this document does not specify error handling behavior for user
agents (e.g., how they behave when they cannot find a resource designated by a
URI).
However, user agents must observe the rules for handling parsing errors
[p. 42] .
32
Since user agents may vary in how they handle error conditions, authors and
users must not rely on specific error recovery behavior.
3.4 The text/css content type
CSS style sheets that exist in separate files are sent over the Internet as a
sequence of bytes accompanied by encoding information (see [HTML40],
chapter 5). The structure of the transmission, termed a message entity, is
defined by RFC 2045 and RFC 2068 (see [RFC2045] and [RFC2068]). A
message entity with a content type of "text/css" represents an independent CSS
document. The "text/css" content type has been registered by RFC 2138
([RFC2318]).
33
34
4 CSS2 syntax and basic data types
Contents
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
35
4.1 Syntax
.
.
.
.
.
.
.
.
.
.
.
.
.
35
4.1.1 Tokenization
.
.
.
.
.
.
.
.
.
.
.
.
.
.
38
4.1.2 Keywords
.
.
.
.
.
.
.
.
.
.
.
38
4.1.3 Characters and case
.
.
.
.
.
.
.
.
.
.
.
.
.
39
4.1.4 Statements
.
.
.
.
.
.
.
.
.
.
.
.
.
.
39
4.1.5 At-rules
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
40
4.1.6 Blocks
.
.
.
.
.
40
4.1.7 Rule sets, declaration blocks, and selectors
.
.
.
.
.
.
.
.
.
41
4.1.8 Declarations and properties
.
.
.
.
.
.
.
.
.
.
.
.
.
42
4.1.9 Comments
.
.
.
.
.
.
.
.
.
.
42
4.2 Rules for handling parsing errors
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
43
4.3 Values
.
.
.
.
.
.
.
.
.
.
43
4.3.1 Integers and real numbers
.
.
.
.
.
.
.
.
.
.
.
.
.
.
43
4.3.2 Lengths
.
.
.
.
.
.
.
.
.
.
.
.
.
46
4.3.3 Percentages
.
.
.
.
.
.
.
.
.
.
.
.
46
4.3.4 URL + URN = URI
.
.
.
.
.
.
.
.
.
.
.
.
.
.
47
4.3.5 Counters
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
48
4.3.6 Colors
.
.
.
.
.
.
.
.
.
.
.
.
.
.
49
4.3.7 Angles
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
49
4.3.8 Times
.
.
.
.
.
.
.
.
.
.
.
.
.
50
4.3.9 Frequencies
.
.
.
.
.
.
.
.
.
.
.
.
.
.
50
4.3.10 Strings
.
.
.
.
.
.
.
.
.
.
50
4.4 CSS document representation
.51
4.4.1 Referring to characters not represented in a character encoding
4.1 Syntax
This section describes a grammar (and forward-compatible parsing rules)
common to any version of CSS (including CSS2). Future versions of CSS will
adhere to this core syntax, although they may add additional syntactic
constraints.
These descriptions are normative. They are also complemented by the norma-
tive grammar rules presented in Appendix D [p. 309] .
4.1.1 Tokenization
All levels of CSS -- level 1, level 2, and any future levels -- use the same core
syntax. This allows UAs to parse (though not completely understand) style
sheets written in levels of CSS that didn’t exist at the time the UAs were created.
Designers can use this feature to create style sheets that work with older user
agents, while also exercising the possibilities of the latest levels of CSS.
35
At the lexical level, CSS style sheets consist of a sequence of tokens. The list
of tokens for CSS2 is as follows. The definitions use Lex-style regular expres-
sions. Octal codes refer to ISO 10646 ([ISO10646]). As in Lex, in case of multiple
matches, the longest match determines the token.
Token
Definition
IDENT
{ident}
ATKEYWORD
@{ident}
STRING
{string}
HASH
#{name}
NUMBER
{num}
PERCENTAGE
{num}%
DIMENSION
{num}{ident}
URI
url\({w}{string}{w}\)
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE
U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO
;
;
{
\{
}
\}
(
\(
)
\)
[
\[
]
\]
S
[ \t\r\n\f]+
COMMENT
\/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION
{ident}\(
INCLUDES
~=
DASHMATCH
|=
DELIM
any other character not matched by the above rules
The macros in curly braces ({}) above are defined as follows:
36
Macro
Definition
ident
{nmstart}{nmchar}*
name
{nmchar}+
nmstart
[a-zA-Z]|{nonascii}|{escape}
nonascii
[^\0-\177]
unicode
\\[0-9a-f]{1,6}[ \n\r\t\f]?
escape
{unicode}|\\[ -~\200-\4177777]
nmchar
[a-z0-9-]|{nonascii}|{escape}
num
[0-9]+|[0-9]*\.[0-9]+
string
{string1}|{string2}
string1
\"([\t
!#$%&(-~]|\\{nl}|\’|{nonascii}|{escape})*\"
string2
\’([\t
!#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\’
nl
\n|\r\n|\r|\f
w
[ \t\r\n\f]*
Below is the core syntax for CSS. The sections that follow describe how to use
it. Appendix D [p. 309] describes a more restrictive grammar that is closer to the
CSS level 2 language.
stylesheet : [ CDO | CDC | S | statement ]*;
statement : ruleset | at-rule;
at-rule : ATKEYWORD S* any* [ block | ’;’ S* ];
block : ’{’ S* [ any | block | ATKEYWORD S* | ’;’ ]* ’}’ S*;
ruleset : selector? ’{’ S* declaration? [ ’;’ S* declaration? ]* ’}’ S*;
selector : any+;
declaration : property ’:’ S* value;
property : IDENT S*;
value : [ any | block | ATKEYWORD S* ]+;
any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
| DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
| FUNCTION | DASHMATCH | ’(’ any* ’)’ | ’[’ any* ’]’ ] S*;
COMMENT tokens do not occur in the grammar (to keep it readable), but any
number of these tokens may appear anywhere between other tokens.
The token S in the grammar above stands for whitespace. Only the characters
"space" (Unicode code 32), "tab" (9), "line feed" (10), "carriage return" (13), and
"form feed" (12) can occur in whitespace. Other space-like characters, such as
"em-space" (8195) and "ideographic space" (12288), are never part of whites-
pace.
37
4.1.2 Keywords
Keywords have the form of identifiers. Keywords must not be placed between
quotes ("..." or ’...’). Thus,
red
is a keyword, but
"red"
is not. (It is a string [p. 50] .) Other illegal examples:
Illegal example(s):
width: "auto";
border: "none";
font-family: "serif";
background: "red";
4.1.3 Characters and case
The following rules always hold:
All CSS style sheets are case-insensitive, except for parts that are not under
the control of CSS. For example, the case-sensitivity of values of the HTML
attributes "id" and "class", of font names, and of URIs lies outside the scope
of this specification. Note in particular that element names are case-insensi-
tive in HTML, but case-sensitive in XML.
In CSS2, identifiers (including element names, classes, and IDs in selectors
[p. 53] ) can contain only the characters [A-Za-z0-9] and ISO 10646 charac-
ters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a
digit. They can also contain escaped characters and any ISO 10646 charac-
ter as a numeric code (see next item). For instance, the identifier "B&W?"
may be written as "B\&W\?" or "B\26 W\3F".
Note that Unicode is code-by-code equivalent to ISO 10646 (see
[UNICODE] and [ISO10646]).
In CSS2, a backslash (\) character indicates three types of character
escapes.
First, inside a string [p. 50] , a backslash followed by a newline is ignored
(i.e., the string is deemed not to contain either the backslash or the newline).
Second, it cancels the meaning of special CSS characters. Any character
(except a hexadecimal digit) can be escaped with a backslash to remove its
special meaning. For example, "\"" is a string consisting of one double
quote. Style sheet preprocessors must not remove these backslashes from a
style sheet since that would change the style sheet’s meaning.
Third, backslash escapes allow authors to refer to characters they can’t
easily put in a document. In this case, the backslash is followed by at most
six hexadecimal digits (0..9A..F), which stand for the ISO 10646
([ISO10646]) character with that number. If a digit or letter follows the
hexadecimal number, the end of the number needs to be made clear. There
are two ways to do that:
1. with a space (or other whitespace character): "\26 B" ("&B")
2. by providing exactly 6 hexadecimal digits: "\000026B" ("&B")
38
In fact, these two methods may be combined. Only one whitespace char-
acter is ignored after a hexadecimal escape. Note that this means that a
"real" space after the escape sequence must itself either be escaped or
doubled.
Backslash escapes are always considered to be part of an identifier [p. 38]
or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is
allowed at the start of a class name, even though "2" is not).
4.1.4 Statements
A CSS style sheet, for any version of CSS, consists of a list of statements (see
the grammar above). There are two kinds of statements: at-rules and rule sets.
There may be whitespace [p. 37] around the statements.
In this specification, the expressions "immediately before" or "immediately
after" mean with no intervening whitespace or comments.
4.1.5 At-rules
At-rules start with an at-keyword, an ’@’ character followed immediately by an
identifier [p. 38] (for example, ’@import’, ’@page’).
An at-rule consists of everything up to and including the next semicolon (;) or
the next block, [p. 40] whichever comes first. A CSS user agent that encounters
an unrecognized at-rule must ignore [p. 42] the whole of the at-rule and continue
parsing after it.
CSS2 user agents must ignore [p. 42] any ’@import’ [p. 71] rule that occurs
inside a block [p. 40] or that doesn’t precede all rule sets.
Illegal example(s):
Assume, for example, that a CSS2 parser encounters this style sheet:
@import "subs.css";
H1 { color: blue }
@import "list.css";
The second ’@import’ is illegal according to CSS2. The CSS2 parser ignores
[p. 42] the whole at-rule, effectively reducing the style sheet to:
@import "subs.css";
H1 { color: blue }
Illegal example(s):
In the following example, the second ’@import’ rule is invalid, since it occurs
inside a ’@media’ block [p. 40] .
@import "subs.css";
@media print {
@import "print-main.css";
BODY { font-size: 10pt }
}
H1 {color: blue }
39
4.1.6 Blocks
A block starts with a left curly brace ({) and ends with the matching right curly
brace (}). In between there may be any characters, except that parentheses (( )),
brackets ([ ]) and braces ({ }) must always occur in matching pairs and may be
nested. Single (’) and double quotes (") must also occur in matching pairs, and
characters between them are parsed as a string. See Tokenization [p. 35] above
for the definition of a string.
Illegal example(s):
Here is an example of a block. Note that the right brace between the double
quotes does not match the opening brace of the block, and that the second
single quote is an escaped character [p. 38] , and thus doesn’t match the first
single quote:
{ causta: "}" + ({7} * ’\’’) }
Note that the above rule is not valid CSS2, but it is still a block as defined
above.
4.1.7 Rule sets, declaration blocks, and selectors
A rule set (also called "rule") consists of a selector followed by a declaration
block.
A declaration-block (also called a {}-block in the following text) starts with a left
curly brace ({) and ends with the matching right curly brace (}). In between there
must be a list of zero or more semicolon-separated (;) declarations.
The selector (see also the section on selectors [p. 53] ) consists of everything
up to (but not including) the first left curly brace ({). A selector always goes
together with a {}-block. When a user agent can’t parse the selector (i.e., it is not
valid CSS2), it must ignore [p. 42] the {}-block as well.
CSS2 gives a special meaning to the comma (,) in selectors. However, since it
is not known if the comma may acquire other meanings in future versions of
CSS, the whole statement should be ignored [p. 42] if there is an error anywhere
in the selector, even though the rest of the selector may look reasonable in
CSS2.
Illegal example(s):
For example, since the "&" is not a valid token in a CSS2 selector, a CSS2
user agent must ignore [p. 42] the whole second line, and not set the color of H3
to red:
H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }
Example(s):
Here is a more complex example. The first two pairs of curly braces are inside
a string, and do not mark the end of the selector. This is a valid CSS2 statement.
40
P[example="public class foo\
{\
private int x;\
\
foo(int x) {\
this.x = x;\
}\
\
}"] { color: red }
4.1.8 Declarations and properties
A declaration is either empty or consists of a property, followed by a colon (:),
followed by a value. Around each of these there may be whitespace [p. 37] .
Because of the way selectors work, multiple declarations for the same selector
may be organized into semicolon (;) separated groups.
Example(s):
Thus, the following rules:
H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }
are equivalent to:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}
A property is an identifier [p. 38] . Any character may occur in the value, but
parentheses ("( )"), brackets ("[ ]"), braces ("{ }"), single quotes (’) and double
quotes (") must come in matching pairs, and semicolons not in strings must be
escaped [p. 38] . Parentheses, brackets, and braces may be nested. Inside the
quotes, characters are parsed as a string.
The syntax of values is specified separately for each property, but in any case,
values are built from identifiers, strings, numbers, lengths, percentages, URIs,
colors, angles, times, and frequencies.
A user agent must ignore [p. 42] a declaration with an invalid property name or
an invalid value. Every CSS2 property has its own syntactic and semantic restric-
tions on the values it accepts.
Illegal example(s):
For example, assume a CSS2 parser encounters this style sheet:
H1 { color: red; font-style: 12pt } /* Invalid value: 12pt */
P { color: blue; font-vendor: any; /* Invalid prop.: font-vendor */
font-variant: small-caps }
EM EM { font-style: normal }
41
The second declaration on the first line has an invalid value ’12pt’. The second
declaration on the second line contains an undefined property ’font-vendor’. The
CSS2 parser will ignore [p. 42] these declarations, effectively reducing the style
sheet to:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
4.1.9 Comments
Comments begin with the characters "/*" and end with the characters "*/". They
may occur anywhere between tokens, and their contents have no influence on
the rendering. Comments may not be nested.
CSS also allows the SGML comment delimiters ("") in certain
places, but they do not delimit CSS comments. They are permitted so that style
rules appearing in an HTML source document (in the STYLE element) may be
hidden from pre-HTML 3.2 user agents. See the HTML 4.0 specification
([HTML40]) for more information.
4.2 Rules for handling parsing errors
In some cases, user agents must ignore part of an illegal style sheet. This speci-
fication defines ignore to mean that the user agent parses the illegal part (in
order to find its beginning and end), but otherwise acts as if it had not been there.
To ensure that new properties and new values for existing properties can be
added in the future, user agents are required to obey the following rules when
they encounter the following scenarios:
Unknown properties. User agents must ignore [p. 42] a declaration [p. 41]
with an unknown property. For example, if the style sheet is:
H1 { color: red; rotation: 70minutes }
the user agent will treat this as if the style sheet had been
H1 { color: red }
Illegal values. User agents must ignore a declaration with an illegal value.
For example:
IMG { float: left } /* correct CSS2 */
IMG { float: left here } /* "here" is not a value of ’float’ */
IMG { background: "red" } /* keywords cannot be quoted in CSS2 */
IMG { border-width: 3 } /* a unit must be specified for length values */
A CSS2 parser would honor the first rule and ignore [p. 42] the rest, as if the
style sheet had been:
IMG { float: left }
IMG { }
IMG { }
IMG { }
42
A user agent conforming to a future CSS specification may accept one or
more of the other rules as well.
Invalid at-keywords. User agents must ignore [p. 42] an invalid at-keyword
together with everything following it, up to and including the next semicolon
(;) or block ({...}), whichever comes first. For example, consider the following:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 { color: blue }
The ’@three-dee’ at-rule is not part of CSS2. Therefore, the whole at-rule
(up to, and including, the third right curly brace) is ignored. [p. 42] A CSS2
user agent ignores [p. 42] it, effectively reducing the style sheet to:
H1 { color: blue }
4.3 Values
4.3.1 Integers and real numbers
Some value types may have integer values (denoted by
number values (denoted by
in decimal notation only. An
a dot (.) followed by one or more digits. Both integers and real numbers may be
preceded by a "-" or "+" to indicate the sign.
Note that many properties that allow an integer or real number as a value actu-
ally restrict the value to some range, often to a non-negative value.
4.3.2 Lengths
Lengths refer to horizontal or vertical measurements.
The format of a length value (denoted by
optional sign character (’+’ or ’-’, with ’+’ being the default) immediately followed
by a
identifier (e.g., px, deg, etc.). After the ’0’ length, the unit identifier is optional.
Some properties allow negative length values, but this may complicate the
formatting model and there may be implementation-specific limits. If a negative
length value cannot be supported, it should be converted to the nearest value
that can be supported.
There are two types of length units: relative and absolute. Relative length units
specify a length relative to another length property. Style sheets that use relative
units will more easily scale from one medium to another (e.g., from a computer
display to a laser printer).
Relative units are:
43
em: the ’font-size’ of the relevant font
ex: the ’x-height’ of the relevant font
px: pixels, relative to the viewing device
Example(s):
H1 { margin: 0.5em } /* em */
H1 { margin: 1ex } /* ex */
P { font-size: 12px } /* px */
The ’em’ unit is equal to the computed value of the ’font-size’ property of the
element on which it is used. The exception is when ’em’ occurs in the value of
the ’font-size’ property itself, in which case it refers to the font size of the parent
element. It may be used for vertical or horizontal measurement. (This unit is also
sometimes called the quad-width in typographic texts.)
The ’ex’ unit is defined by the font’s ’x-height’. The x-height is so called
because it is often equal to the height of the lowercase "x". However, an ’ex’ is
defined even for fonts that don’t contain an "x".
Example(s):
The rule:
H1 { line-height: 1.2em }
means that the line height of H1 elements will be 20% greater than the font
size of the H1 elements. On the other hand:
H1 { font-size: 1.2em }
means that the font-size of H1 elements will be 20% greater than the font size
inherited by H1 elements.
When specified for the root of the document tree [p. 30] (e.g., "HTML" in
HTML), ’em’ and ’ex’ refer to the property’s initial value [p. 69] .
Pixel units are relative to the resolution of the viewing device, i.e., most often a
computer display. If the pixel density of the output device is very different from
that of a typical computer display, the user agent should rescale pixel values. It is
recommended that the reference pixel be the visual angle of one pixel on a
device with a pixel density of 90dpi and a distance from the reader of an arm’s
length. For a nominal arm’s length of 28 inches, the visual angle is therefore
about 0.0227 degrees.
For reading at arm’s length, 1px thus corresponds to about 0.28 mm
(1/90 inch). When printed on a laser printer, meant for reading at a little less than
arm’s length (55 cm, 21 inches), 1px is about 0.21 mm. On a 300 dots-per-inch
(dpi) printer, that may be rounded up to 3 dots (0.25 mm); on a 600 dpi printer, it
can be rounded to 5 dots.
The two images below illustrate the effect of viewing distance on the size of a
pixel and the effect of a device’s resolution. In the first image, a reading distance
of 71 cm (28 inch) results in a px of 0.28 mm, while a reading distance of 3.5 m
(12 feet) requires a px of 1.4 mm.
44
28 inch
71 cm
140 inch
3.5 m
0.28 mm
1.4 mm
viewer
In the second image, an area of 1px by 1px is covered by a single dot in a
low-resolution device (a computer screen), while the same area is covered by 16
dots in a higher resolution device (such as a 400 dpi laser printer).
laserprint
monitor screen
1px
1px
= 1 device pixel
Child elements do not inherit the relative values specified for their parent; they
(generally) inherit the computed values [p. 70] .
Example(s):
In the following rules, the computed ’text-indent’ value of H1 elements will be
36pt, not 45pt, if H1 is a child of the BODY element.
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e., 36pt */
}
H1 { font-size: 15pt }
Absolute length units are only useful when the physical properties of the output
medium are known. The absolute units are:
in: inches -- 1 inch is equal to 2.54 centimeters.
cm: centimeters
45
mm: millimeters
pt: points -- the points used by CSS2 are equal to 1/72th of an inch.
pc: picas -- 1 pica is equal to 12 points.
Example(s):
H1 { margin: 0.5in } /* inches */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points */
H4 { font-size: 1pc } /* picas */
In cases where the specified length cannot be supported, user agents must
approximate it in the actual value.
4.3.3 Percentages
The format of a percentage value (denoted by
is an optional sign character (’+’ or ’-’, with ’+’ being the default) immediately
followed by a
Percentage values are always relative to another value, for example a length.
Each property that allows percentages also defines the value to which the
percentage refers. The value may be that of another property for the same
element, a property for an ancestor element, or a value of the formatting context
(e.g., the width of a containing block [p. 96] ). When a percentage value is set for
a property of the root [p. 30] element and the percentage is defined as referring
to the inherited value of some property, the resultant value is the percentage
times the initial value [p. 69] of that property.
Example(s):
Since child elements (generally) inherit the computed values [p. 70] of their
parent, in the following example, the children of the P element will inherit a value
of 12pt for ’line-height’, not the percentage value (120%):
P { font-size: 10pt }
P { line-height: 120% } /* 120% of ’font-size’ */
4.3.4 URL + URN = URI
URLs (Uniform Resource Locators, see [RFC1738] and [RFC1808]) provide the
address of a resource on the Web. An expected new way of identifying resources
is called URN (Uniform Resource Name). Together they are called URIs (Uniform
Resource Identifiers, see [URI]). This specification uses the term URI.
URI values in this specification are denoted by
used to designate URIs in property values is "url()", as in:
Example(s):
BODY { background: url("http://www.bg.com/pinkish.gif") }
The format of a URI value is ’url(’ followed by optional whitespace [p. 37]
followed by an optional single quote (’) or double quote (") character followed by
the URI itself, followed by an optional single quote (’) or double quote (") charac-
ter followed by optional whitespace followed by ’)’. The two quote characters
must be the same.
46
Example(s):
An example without quotes:
LI { list-style: url(http://www.redballs.com/redball.png) disc }
Parentheses, commas, whitespace characters, single quotes (’) and double
quotes (") appearing in a URI must be escaped with a backslash: ’\(’, ’\)’, ’\,’.
Depending on the type of URI, it might also be possible to write the above
characters as URI-escapes (where "(" = %28, ")" = %29, etc.) as described in
[URI].
In order to create modular style sheets that are not dependent on the absolute
location of a resource, authors may use relative URIs. Relative URIs (as defined
in [RFC1808]) are resolved to full URIs using a base URI. RFC 1808, section 3,
defines the normative algorithm for this process. For CSS style sheets, the base
URI is that of the style sheet, not that of the source document.
Example(s):
For example, suppose the following rule:
BODY { background: url("yellow") }
is located in a style sheet designated by the URI:
http://www.myorg.org/style/basic.css
The background of the source document’s BODY will be tiled with whatever
image is described by the resource designated by the URI
http://www.myorg.org/style/yellow
User agents may vary in how they handle URIs that designate unavailable or
inapplicable resources.
4.3.5 Counters
Counters are denoted by identifiers (see the ’counter-increment’ and
’counter-reset’ properties). To refer to the value of a counter, the notation
’counter(
default style is ’decimal’.
To refer to a sequence of nested counters of the same name, the notation is
’counters(
generated content [p. 153] .
In CSS2, the values of counters can only be referred to from the ’content’ prop-
erty. Note that ’none’ is a possible
empty string.
Example(s):
Here is a style sheet that numbers paragraphs (P) for each chapter (H1). The
paragraphs are numbered with roman numerals, followed by a period and a
space:
P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}
47
Counters that are not in the scope [p. 162] of any ’counter-reset’, are assumed
to have been reset to 0 by a ’counter-reset’ on the root element.
4.3.6 Colors
A
The list of keyword color names is: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16
colors are defined in HTML 4.0 ([HTML40]). In addition to these color keywords,
users may specify keywords that correspond to the colors used by certain objects
in the user’s environment. Please consult the section on system colors [p. 272]
for more information.
Example(s):
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
The RGB color model is used in numerical color specifications. These exam-
ples all specify the same color:
Example(s):
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
The format of an RGB value in hexadecimal notation is a ’#’ immediately
followed by either three or six hexadecimal characters. The three-digit RGB nota-
tion (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by
adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white
(#ffffff) can be specified with the short notation (#fff) and removes any dependen-
cies on the color depth of the display.
The format of an RGB value in the functional notation is ’rgb(’ followed by a
comma-separated list of three numerical values (either three integer values or
three percentage values) followed by ’)’. The integer value 255 corresponds to
100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) =
rgb(100%,100%,100%) = #FFF. Whitespace [p. 37] characters are allowed
around the numerical values.
All RGB colors are specified in the sRGB color space (see [SRGB]). User
agents may vary in the fidelity with which they represent these colors, but using
sRGB provides an unambiguous and objectively measurable definition of what
the color should be, which can be related to international standards (see
[COLORIMETRY]).
Conforming user agents may limit their color-displaying efforts to performing a
gamma-correction on them. sRGB specifies a display gamma of 2.2 under speci-
fied viewing conditions. User agents should adjust the colors given in CSS such
that, in combination with an output device’s "natural" display gamma, an effective
display gamma of 2.2 is produced. See the section on gamma correction [p. 193]
for further details. Note that only colors specified in CSS are affected; e.g.,
images are expected to carry their own color information.
48
Values outside the device gamut should be clipped: the red, green, and blue
values must be changed to fall within the range supported by the device. For a
typical CRT monitor, whose device gamut is the same as sRGB, the three rules
below are equivalent:
Example(s):
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
EM { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
Other devices, such as printers, have different gamuts to sRGB; some colors
outside the 0..255 sRGB range will be representable (inside the device gamut),
while other colors inside the 0..255 sRGB range will be outside the device gamut
and will thus be clipped.
Note. Although colors can add significant amounts of information to document
and make them more readable, please consider that certain color combinations
may cause problems for users with color blindness. If you use a background
image or set the background color, please adjust foreground colors accordingly.
4.3.7 Angles
Angle values (denoted by
[p. 277] .
Their format is an optional sign character (’+’ or ’-’, with ’+’ being the default)
immediately followed by a
tifier.
Angle unit identifiers are:
deg: degrees
grad: grads
rad: radians
Angle values may be negative. They should be normalized to the range
0-360deg by the user agent. For example, -10deg and 350deg are equivalent.
For example, a right angle is ’90deg’ or ’100grad’ or ’1.570796326794897rad’.
4.3.8 Times
Time values (denoted by