Abstract
This specification defines Cascading Style Sheets, level 2
revision 1 (CSS 2.1). CSS 2.1 is a style sheet language
that allows
authors and users to attach style (e.g., fonts and spacing) to
structured documents (e.g., HTML documents and XML
applications). By separating the presentation style of documents from
the content of documents, CSS 2.1 simplifies Web authoring and
site maintenance.
CSS 2.1 builds on CSS2 [CSS2] which builds on CSS1 [CSS1].
It supports media-specific style sheets so that authors may tailor the
presentation of their documents to visual browsers, aural devices,
printers, braille devices, handheld devices, etc. It also supports
content positioning, table layout, features for internationalization
and some properties related to user interface.
CSS 2.1 corrects a few errors in CSS2 (the most important
being a new definition of the height/width of absolutely positioned
elements, more influence for HTML's "style" attribute and a new
calculation of the 'clip' property), and adds a few highly requested
features which have already been widely implemented.
But most of all CSS 2.1
represents a "snapshot" of CSS usage: it consists of all CSS features
that are implemented interoperably at the date of publication of the Recommendation.
CSS 2.1 is derived from and is intended to replace CSS2. Some
parts of CSS2 are unchanged in CSS 2.1, some parts have been
altered, and some parts removed. The removed portions may be used in a
future CSS3 specification. Future specs should refer to CSS 2.1
(unless they need features from CSS2 which have been dropped in
CSS 2.1, and then they should only reference CSS2 for those
features, or preferably reference such feature(s) in the respective
CSS3 Module that includes those feature(s)).
Status of this document
This section describes the status of this document at the time
of its publication. Other documents may supersede this document. A
list of current W3C publications and the latest revision of this
technical report can be found in the W3C technical reports index at
http://www.w3.org/TR/.
This is a W3C Candidate Recommendation, which means the
specification has been widely reviewed and W3C recommends that it be
implemented. It will remain Candidate Recommendation
at least until 20 December 2007. A test suite and
a report on implementations will be provided before the document becomes
a Proposed Recommendation.
Publication as a Candidate Recommendation does not imply endorsement
by the W3C Membership. This is a draft document and may be updated,
replaced or obsoleted by other documents at any time. It is inappropriate
to cite this document as other than work in progress.
The (archived)
public mailing list www-style@w3.org (see instructions) is preferred
for discussion of this specification. When sending e-mail, please put
the text “[CSS21]” in the subject, preferably like
this: “[CSS21] …summary of
comment…”
A list of changes since
the last Working Draft is
available in the
Disposition of
Comments.
This document was produced by the CSS Working Group (part
of the Style Activity).
This document was produced by a group operating under
the 5
February 2004 W3C Patent Policy. W3C maintains
a public list of any
patent disclosures made in connection with the deliverables of the
group; that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent which the
individual believes
contains Essential
Claim(s) must disclose the information in accordance
with section 6 of
the W3C Patent Policy.
Candidate Recommendation Exit Criteria
For this specification to exit the CR stage, the following
conditions must be met:
-
There must be at least two interoperable implementations
for every feature. For the purposes of this criterion,
we define the following terms:
- feature
-
A section or subsection of the specification.
- interoperable
-
passing the respective test cases in the test suite, or,
if the implementation is not a web browser, equivalent tests.
Every relevant test in the test suite should have an equivalent
test created if such a UA is to be used to claim interoperability.
In addition if such a UA is to be used to claim interoperability,
then there must one or more additional UAs which can also pass
those equivalent tests in the same way for the purpose of
interoperability. The equivalent tests must be made publicly
available for the purposes of peer review.
- implementation
-
a user agent which:
- implements the feature.
- is available (i.e. publicly downloadable or available
through some other public point of sale mechanism). This is the
"show me" requirement.
- is shipping (i.e. development, private or unofficial
versions are insufficient).
- is not experimental (i.e. is intended for a wide audience
and could be used on a daily basis).
A minimum of six months of the CR period must have elapsed.
This is to ensure that enough time is given for any remaining major
errors to be caught.
The CR period will be extended if implementations are slow to
appear.
Features that were not in CSS1 will be dropped (thus reducing the
list of "all" features mentioned above) if two or more
interoperable implementations of those features are not found by
the end of the CR period.
Features will also be dropped if sufficient and adequate
tests (by judgment of the working group) have not been produced for
those features by the end of the CR period.
Features at risk
The working group has identified the following features as being
currently poorly implemented by UAs. They are therefore most at risk
of being removed from CSS 2.1 when exiting CR. (Any changes of this
nature will still result in the specification being returned to last
call.) Implementors are urged to implement these features, or correct
bugs in their implementations, if they wish to see these features remain
in this specification.
- New 'list-style-type' values
-
- 'armenian'
- 'georgian'
- 'lower-greek'
Implementors are advised to look at CSS3 Lists instead, where these and
many other new values not found in CSS1 are defined in detail.
[CSS3LIST]
- Support for multiple ID attributes for the ID selector
-
Because implementations are not expected to support multiple IDs
per element soon, this feature may be made informative. The W3C
Selectors specification will continue to have this feature
normatively. (Section
5.9.)
- Automatic table layout algorithm
-
The input to the suggested (non-normative) automatic layout
algorithm for tables is restricted to (1) the containing block width
and (2) the content and properties of the table and its
children. This restriction may be lifted.
- Quotes
-
The 'quotes' property and the
'open-quote', 'close-quote', 'no-open-quote' and 'no-close-quote'
keywords may be dropped.
- BODY element in XHTML
-
The effect of 'overflow' and 'background' is different on BODY elements
in HTML than on other elements. It may be that the exceptional
handling of BODY in HTML is extended to BODY in XHTML1.
- 1 About the CSS 2.1 Specification
- 2 Introduction to CSS 2.1
- 3 Conformance: Requirements and Recommendations
- 4 Syntax and basic data types
- 5 Selectors
- 6 Assigning property values, Cascading, and Inheritance
- 7 Media types
- 8 Box model
- 8.1 Box dimensions
- 8.2 Example of margins, padding, and borders
- 8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'
- 8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'
- 8.5 Border properties
- 8.5.1 Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width'
- 8.5.2 Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-color'
- 8.5.3 Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'
- 8.5.4 Border shorthand properties: 'border-top', 'border-right', 'border-bottom', 'border-left', and 'border'
- 8.6 The box model for inline elements in bidirection context
- 9 Visual formatting model
- 10 Visual formatting model details
- 10.1 Definition of "containing block"
- 10.2 Content width: the 'width' property
- 10.3 Calculating widths and margins
- 10.3.1 Inline, non-replaced elements
- 10.3.2 Inline, replaced elements
- 10.3.3 Block-level, non-replaced elements in normal flow
- 10.3.4 Block-level, replaced elements in normal flow
- 10.3.5 Floating, non-replaced elements
- 10.3.6 Floating, replaced elements
- 10.3.7 Absolutely positioned, non-replaced elements
- 10.3.8 Absolutely positioned, replaced elements
- 10.3.9 'Inline-block', non-replaced elements in normal flow
- 10.3.10 'Inline-block', replaced elements in normal flow
- 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
- 10.5 Content height: the 'height' property
- 10.6 Calculating heights and margins
- 10.7 Minimum and maximum heights: 'min-height' and 'max-height'
- 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties
- 11 Visual effects
- 12 Generated content, automatic numbering, and lists
- 13 Paged media
- 14 Colors and Backgrounds
- 15 Fonts
- 16 Text
- 17 Tables
- 18 User interface
- Appendix A. Aural style sheets
- Appendix B. Bibliography
- Appendix C. Changes
- C.1 Additional property values
- C.2 Changes
- C.2.1 Section 1.1 CSS 2.1 vs CSS 2
- C.2.2 Section 1.2 Reading the specification
- C.2.3 Section 1.3 How the specification is organized
- C.2.4 Section 1.4.2.1 Value
- C.2.5 Section 1.4.2.6 Media groups
- C.2.6 Section 1.4.2.7 Computed value
- C.2.7 Section 1.4.4 Notes and examples
- C.2.8 Section 1.5 Acknowledgements
- C.2.9 Section 3.2 Conformance
- C.2.10 Section 3.3 Error Conditions
- C.2.11 4.1.1 Tokenization
- C.2.12 4.1.3 Characters and case
- C.2.13 Section 4.2 Rules for handling parsing errors
- C.2.14 Section 4.3 Values
- C.2.15 Section 4.3.2 Lengths
- C.2.16 Section 4.3.4 URLs and URIs
- C.2.17 Section 4.3.6 Colors
- C.2.18 Section 4.3.8 Unsupported Values
- C.2.19 Section 4.4 CSS style sheet representation
- C.2.20 Section 5.8.1 Matching attributes and attribute values
- C.2.21 Section 5.8.3 Class selectors
- C.2.22 Section 5.9 ID selectors
- C.2.23 Section 5.10 Pseudo-elements and pseudo-classes
- C.2.24 5.11.2 The link pseudo-classes: :link and :visited
- C.2.25 Section 5.11.4 The language pseudo-class: :lang
- C.2.26 Section 5.12.1 The :first-line pseudo-element
- C.2.27 Section 5.12.2 The :first-letter pseudo-element
- C.2.28 Section 6.1 Specified, computed, and actual values
- C.2.29 Section 6.4.1 Cascading order
- C.2.30 Section 6.4.3 Calculating a selector's specificity
- C.2.31 Section 6.4.4 Precedence of non-CSS presentational hints
- C.2.32 Section 7.3 Recognized Media Types
- C.2.33 Section 7.3.1 Media Groups
- C.2.34 Section 8.3 Margin properties
- C.2.35 Section 8.3.1 Collapsing margins
- C.2.36 Section 8.4 Padding properties
- C.2.37 Section 8.5.2 Border color
- C.2.38 Section 8.5.3 Border style
- C.2.39 Section 8.6 The box model for inline elements in bidirection context
- C.2.40 Section 9.1.2 Containing blocks
- C.2.41 Section 9.2.1.1 Anonymous block boxes
- C.2.42 Section 9.2.2.1 Anonymous inline boxes
- C.2.43 Section 9.2.3 Run-in boxes
- C.2.44 Section 9.2.4 The 'display' property
- C.2.45 Section 9.3.1 Choosing a positioning scheme
- C.2.46 Section 9.3.2 Box offsets
- C.2.47 Section 9.4.1 Block formatting contexts
- C.2.48 Section 9.4.2 Inline formatting context
- C.2.49 Section 9.4.3 Relative positioning
- C.2.50 Section 9.5 Floats
- C.2.51 Section 9.5.1 Positioning the float
- C.2.52 Section 9.5.2 Controlling flow next to floats
- C.2.53 Section 9.7 Relationships between 'display', 'position', and 'float'
- C.2.54 Section 9.9 Layered presentation
- C.2.55 Section 9.10 Text direction
- C.2.56 Chapter Visual formatting model details
- C.2.57 Section 10.1 Definition of "containing block"
- C.2.58 Section 10.2 Content width
- C.2.59 Section 10.3 Calculating widths and margins
- C.2.60 Section 10.3.2 Inline, replaced elements
- C.2.61 Section 10.3.3 Block-level, non-replaced elements in normal flow
- C.2.62 Section 10.3.4 Block-level, replaced elements in normal flow
- C.2.63 Section 10.3.5 Floating, non-replaced elements
- C.2.64 Section 10.3.6 Floating, replaced elements
- C.2.65 Section 10.3.7 Absolutely positioned, non-replaced elements
- C.2.66 Section 10.3.8 Absolutely positioned, replaced elements
- C.2.67 Section 10.4 Minimum and maximum widths
- C.2.68 Section 10.5 Content height
- C.2.69 Section 10.6 Calculating heights and margins
- C.2.70 Section 10.6.1 Inline, non-replaced elements
- C.2.71 Section 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
- C.2.72 Section 10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
- C.2.73 Section 10.6.4 Absolutely positioned, non-replaced elements
- C.2.74 Section 10.6.5 Absolutely positioned, replaced elements
- C.2.75 Section 10.7 Minimum and maximum heights
- C.2.76 Section 10.8 Line height calculations
- C.2.77 Section 10.8.1 Leading and half-leading
- C.2.78 Section 11.1 Overflow and clipping
- C.2.79 Section 11.1.1 Overflow
- C.2.80 Section 11.1.2 Clipping: the 'clip' property
- C.2.81 Section 11.2 Visibility
- C.2.82 Chapter 12 Generated content, automatic numbering, and lists
- C.2.83 Section 12.1 The :before and :after pseudo-elements
- C.2.84 Section 12.2 The 'content' property
- C.2.85 Section 12.3.2 Inserting quotes with the 'content' property
- C.2.86 Section 12.4 Automatic counters and numbering
- C.2.87 Section 12.4.1 Nested counters and scope
- C.2.88 Section 12.5 Lists
- C.2.89 Section 12.5.1 Lists
- C.2.90 Chapter 13 Paged media
- C.2.91 Section 13.2.2 Page selectors
- C.2.92 Section 13.3.1 Page break properties
- C.2.93 Section 13.3.3 Allowed page breaks
- C.2.94 Section 14.2.1 Background properties
- C.2.95 Section 14.3 Gamma correction
- C.2.96 Chapter 15 Fonts
- C.2.97 Section 15.2 Font matching algorithm
- C.2.98 Section 15.2.2 Font family
- C.2.99 Section 15.5 Small-caps
- C.2.100 Section 15.6 Font boldness
- C.2.101 Section 15.7 Font size
- C.2.102 Chapter 16 Text
- C.2.103 Section 16.2 Alignment
- C.2.104 Section 16.3.1 Underlining, over lining, striking, and blinking
- C.2.105 Section 16.4 Letter and word spacing
- C.2.106 Section 16.5 Capitalization
- C.2.107 Section 16.6 Whitespace
- C.2.108 Chapter 17 Tables
- C.2.109 17.2 The CSS table model
- C.2.110 Section 17.2.1 Anonymous table objects
- C.2.111 Section 17.4 Tables in the visual formatting model
- C.2.112 Section 17.4.1 Caption position and alignment
- C.2.113 Section 17.5 Visual layout of table contents
- C.2.114 Section 17.5.1 Table layers and transparency
- C.2.115 Section 17.5.2.1 Fixed table layout
- C.2.116 Section 17.5.2.2 Automatic table layout
- C.2.117 Section 17.5.3 Table height algorithms
- C.2.118 17.5.4 Horizontal alignment in a column
- C.2.119 Section 17.6 Borders
- C.2.120 Section 17.6.1 The separated borders model
- C.2.121 Section 17.6.1.1 Borders and Backgrounds around empty cells
- C.2.122 Section 17.6.2 The collapsing border model
- C.2.123 Section 17.6.2.1 Border conflict resolution
- C.2.124 Section 18.4 Dynamic outlines
- C.2.125 Chapter 12 Generated content, automatic numbering, and lists
- C.2.126 Appendix A. Aural style sheets
- C.2.127 Appendix A Section 5 Pause properties
- C.2.128 Appendix A Section 6 Cue properties
- C.2.129 Appendix A Section 7 Mixing properties
- C.2.130 Appendix B Bibliography
- C.2.131 Other
- C.3 Errors
- C.4 Clarifications
- C.4.1 Section 2.1 A brief CSS 2.1 tutorial for HTML
- C.4.2 Section 2.2 A brief CSS 2.1 tutorial for XML
- C.4.3 Section 3.1 Definitions
- C.4.4 Section 4.1 Syntax
- C.4.5 Section 4.1.1 Tokenization
- C.4.6 Section 4.1.3 Characters and case
- C.4.7 Section 4.1.7 Rule sets, declaration blocks, and selectors
- C.4.8 Section 4.2 Rules for handling parsing errors
- C.4.9 Section 4.3.1 Integers and real numbers
- C.4.10 Section 4.3.2 Lengths
- C.4.11 Section 4.3.4 URLs and URIs
- C.4.12 Section 5.1 Pattern matching
- C.4.13 Section 5.7 Adjacent sibling selectors
- C.4.14 Section 5.8.2 Default attribute values in DTDs
- C.4.15 Section 5.9 ID selectors
- C.4.16 Section 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
- C.4.17 Section 5.11.4 The language pseudo-class: :lang
- C.4.18 Section 5.12.2 The :first-letter pseudo-element
- C.4.19 Section 6.2 Inheritance
- C.4.20 Section 6.2.1 The 'inherit' value
- C.4.21 Section 6.3 The @import rule
- C.4.22 6.4 The Cascade
- C.4.23 6.4.1 Cascading order
- C.4.24 Section 6.4.3 Calculating a selector's specificity
- C.4.25 Section 7.2.1 The @media rule
- C.4.26 Section 7.3 Recognized media types
- C.4.27 Section 7.3.1 Media groups
- C.4.28 Section 8.1 Box dimensions
- C.4.29 Section 8.3 Margin properties
- C.4.30 Section 8.3.1
- C.4.31 Section 8.5.3 Border style
- C.4.32 Section 9.1.1 The viewport
- C.4.33 Section 9.3.1 Choosing a positioning scheme
- C.4.34 Section 9.3.2 Box offsets
- C.4.35 Section 9.4.2 Inline formatting context
- C.4.36 Section 9.4.3 Relative positioning
- C.4.37 Section 9.5 Floats
- C.4.38 Section 9.5.1 Positioning the float
- C.4.39 Section 9.5.2 Controlling flow next to floats
- C.4.40 Section 9.8 Comparison of normal flow, floats, and absolute positioning
- C.4.41 Section 10.1 Definition of "containing block"
- C.4.42 Section 10.2 Content width
- C.4.43 Section 10.3.3 Block-level, non-replaced elements in normal flow
- C.4.44 Section 10.4 Minimum and maximum widths
- C.4.45 Section 10.6 Calculating heights and margins
- C.4.46 Section 10.7 Minimum and maximum heights
- C.4.47 Section 10.8 Line height calculations
- C.4.48 Section 11.1 Overflow and clipping
- C.4.49 Section 11.1.1 Overflow
- C.4.50 Section 11.1.2 Clipping
- C.4.51 Section 11.2 Visibility
- C.4.52 Section 12.1 The :before and :after pseudo-elements
- C.4.53 Section 12.2 The 'content' property
- C.4.54 Section 12.3.2 Inserting quotes with the 'content' property
- C.4.55 Section 12.4 Automatic counters and numbering
- C.4.56 Section 12.4.3 Counters in elements with 'display: none'
- C.4.57 Section 14.2 The background
- C.4.58 Section 15.1 Fonts Introduction
- C.4.59 Section 15.2 Font matching algorithm
- C.4.60 Section 15.2.2 Font family
- C.4.61 Section 15.3.1 Generic font families
- C.4.62 Section 15.4 Font styling
- C.4.63 Section 15.5 Small-caps
- C.4.64 Section 15.6 Font boldness
- C.4.65 Section 15.7 Font size
- C.4.66 Section 16.1 Indentation
- C.4.67 16.2 Alignment
- C.4.68 Section 16.3.1 Underlining, over lining, striking, and blinking
- C.4.69 Section 16.5 Capitalization
- C.4.70 Section 16.6 Whitespace
- C.4.71 Section 17.1 Introduction to tables
- C.4.72 Section 17.2 The CSS table model
- C.4.73 Section 17.2.1 Anonymous table objects
- C.4.74 Section 17.4 Tables in the visual formatting model
- C.4.75 Section 17.5 Visual layout of table contents
- C.4.76 Section 17.5.1 Table layers and transparency
- C.4.77 Section 17.5.2 Table width algorithms
- C.4.78 Section 17.5.2.1 Fixed table layout
- C.4.79 Section 17.5.2.2 Automatic table layout
- C.4.80 Section 17.5.5 Dynamic row and column effects
- C.4.81 17.6.1 The separated borders model
- C.4.82 Section 17.6.2 The collapsing borders model
- C.4.83 Section 18.2 System Colors
- C.4.84 Section 18.4 Dynamic outlines
- C.4.85 Section 18.4.1 Outlines and the focus
- C.4.86 Appendix D
- C.5 Code Diffs for Appendices D and G
- Appendix D. Default style sheet for HTML 4
- Appendix E. Elaborate description of Stacking Contexts
- Appendix F. Full property table
- Appendix G. Grammar of CSS 2.1
- Appendix I. Index