Cascading Style Sheets, level 2 revision 1
CSS 2.1 Specification
W3C Working Draft 11 April 2006
- This version:
- http://www.w3.org/TR/2006/WD-CSS21-20060411
- Latest version:
- http://www.w3.org/TR/CSS21
- Previous version:
- http://www.w3.org/TR/2005/WD-CSS21-20050613
- Editors:
- Bert Bos <bert @w3.org>
- Tantek Çelik <tantek @cs.stanford.edu>
- Ian Hickson <ian @hixie.ch>
- Håkon Wium Lie <howcome @opera.com>
This document is also available in these non-normative formats: plain text, gzip'ed tar file, zip file, gzip'ed PostScript, PDF. See also translations.
Copyright © 2006 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
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 working draft contains most of the changes that resulted from comments on the previous draft, but not all of them. It is published in the hope that it can help people check that those changes are correct. It is expected that the next publication will be a Candidate Recommendation.
The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this and other specifications in the Style area. When commenting on this document, please put the text "CSS21" in the subject, preferably like this: "[CSS21] <summary of comment>"
Publication as a Working Draft 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.
A test suite and a report on implementations will be provided before the document becomes a Proposed Recommendation.
This document is produced by the CSS working group (part of the Style Activity, see summary).
This document was produced by a group operating under the 24 January 2002 CPP as amended by the W3C Patent Policy Transition Procedure. 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 should 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.
Quick Table of Contents
- 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
- 9 Visual formatting model
- 10 Visual formatting model details
- 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
- 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
Full Table of Contents
- 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
- 9.1 Introduction to the visual formatting model
- 9.2 Controlling box generation
- 9.3 Positioning schemes
- 9.4 Normal flow
- 9.5 Floats
- 9.6 Absolute positioning
- 9.7 Relationships between 'display', 'position', and 'float'
- 9.8 Comparison of normal flow, floats, and absolute positioning
- 9.9 Layered presentation
- 9.10 Text direction: the 'direction' and 'unicode-bidi' properties
- 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.6.1 Inline, non-replaced elements
- 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
- 10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
- 10.6.4 Absolutely positioned, non-replaced elements
- 10.6.5 Absolutely positioned, replaced elements
- 10.6.6 Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible'; 'inline-block', non-replaced elements; and floating, non-replaced elements
- 10.6.7 'Auto' heights for block formatting context roots
- 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
- 15.1 Introduction
- 15.2 Font matching algorithm
- 15.3 Font family: the 'font-family' property
- 15.4 Font styling: the 'font-style' property
- 15.5 Small-caps: the 'font-variant' property
- 15.6 Font boldness: the 'font-weight' property
- 15.7 Font size: the 'font-size' property
- 15.8 Shorthand font property: the 'font' property
- 16 Text
- 17 Tables
- 18 User interface
- Appendix A. Aural style sheets
- A.1 The media types 'aural' and 'speech'
- A.2 Introduction to aural style sheets
- A.3 Volume properties: 'volume'
- A.4 Speaking properties: 'speak'
- A.5 Pause properties: 'pause-before', 'pause-after', and 'pause'
- A.6 Cue properties: 'cue-before', 'cue-after', and 'cue'
- A.7 Mixing properties: 'play-during'
- A.8 Spatial properties: 'azimuth' and 'elevation'
- A.9 Voice characteristic properties: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness'
- A.10 Speech properties: 'speak-punctuation' and 'speak-numeral'
- A.11 Audio rendering of tables
- A.12 Sample style sheet for HTML
- A.13 Emacspeak
- Appendix B. Bibliography
- Appendix C. Changes
- C.1 Additional property values
- C.2 Changes
- C.2.1 Section 3.2 Conformance
- C.2.2 Section 6.1.2 Computed values
- C.2.3 Section 6.4.3 Calculating a selector's specificity
- C.2.4 Section 6.4.4 Precedence of non-CSS presentational hints
- C.2.5 Chapter 9 Visual formatting model
- C.2.6 Section 10.3.7 Absolutely positioned, non-replaced elements
- C.2.7 Section 10.6.4 Absolutely positioned, non-replaced elements
- C.2.8 Section 11.1.2 Clipping: the 'clip' property
- C.2.9 Section 14.2.1 Background properties
- C.2.10 17.4.1 Caption position and alignment
- C.2.11 17.5.4 Horizontal alignment in a column
- C.2.12 Section 17.6 Borders
- C.2.13 Chapter 12 Generated content, automatic numbering, and lists
- C.2.14 Chapter 13 Paged media
- C.2.15 Chapter 15 Fonts
- C.2.16 Chapter 16 Text
- C.2.17 Appendix A. Aural style sheets
- C.2.18 Other
- C.3 Errors
- C.3.1 Shorthand properties
- C.3.2 Section 4.1.1 (and G2)
- C.3.3 4.1.3 Characters and case
- C.3.4 Section 4.3 (Double sign problem)
- C.3.5 Section 4.3.2 Lengths
- C.3.6 Section 4.3.6
- C.3.7 5.10 Pseudo-elements and pseudo-classes
- C.3.8 8.2 Example of margins, padding, and borders
- C.3.9 Section 8.5.2 Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-color'
- C.3.10 Section 8.4 Padding properties
- C.3.11 8.5.3 Border style
- C.3.12 Section 8.5.4 Border shorthand properties: 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border'
- C.3.13 8.5.4 Border shorthand properties: 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border'
- C.3.14 Section 9.3.1
- C.3.15 Section 9.3.2
- C.3.16 Section 9.4.3
- C.3.17 Section 9.7 Relationships between 'display', 'position', and 'float'
- C.3.18 Section 10.3.2 Inline, replaced elements (and 10.3.4, 10.3.6, and 10.3.8)
- C.3.19 Section 10.3.3
- C.3.20 Section 10.6.2 Inline, replaced elements ... (and 10.6.5)
- C.3.21 Section 10.6.3
- C.3.22 Section 11.1.1
- C.3.23 11.2 Visibility: the 'visibility' property
- C.3.24 12.6.2 Lists
- C.3.25 Section 15.5
- C.3.26 Section 16.6 Whitespace: the 'white-space' property
- C.3.27 Section 17.2 The CSS table model
- C.3.28 17.2.1 Anonymous table objects
- C.3.29 17.5 Visual layout of table contents
- C.3.30 17.5 Visual layout of table contents
- C.3.31 Section 17.5.1 Table layers and transparency
- C.3.32 Section 17.6.1 The separated borders model
- C.3.33 Appendix D.2 Lexical scanner
- C.4 Clarifications
- C.4.1 2.2 A brief CSS2 tutorial for XML
- C.4.2 Section 4.1.1
- C.4.3 Section 5.5
- C.4.4 Section 5.9 ID selectors
- C.4.5 Section 5.12.1 The :first-line pseudo-element
- C.4.6 Section 6.2.1
- C.4.7 6.4 The Cascade
- C.4.8 Section 6.4.3 Calculating a selector's specificity
- C.4.9 Section 7.3 Recognized media types
- C.4.10 Section 8.1
- C.4.11 Section 8.3.1
- C.4.12 Section 9.4.2
- C.4.13 Section 9.4.3
- C.4.14 Section 9.10
- C.4.15 10.3.3 Block-level, non-replaced elements in normal flow
- C.4.16 Section 10.5 Content height: the 'height' property
- C.4.17 Section 10.8.1
- C.4.18 Section 11.1
- C.4.19 Section 11.1.1
- C.4.20 Section 11.1.2
- C.4.21 12.1 The :before and :after pseudo-elements
- C.4.22 Section 12.4.2 Inserting quotes with the 'content' property
- C.4.23 Lists 12.6.2
- C.4.24 14.2 The background
- C.4.25 14.2.1 Background properties
- C.4.26 Section 16.1
- C.4.27 16.2 Alignment: the 'text-align' property
- C.4.28 Section 17.5.1 Table layers and transparency
- C.4.29 Section 17.5.2 Table width algorithms
- C.4.30 17.6.1 The separated borders model
- C.4.31 Borders around empty cells: the 'empty-cells' property
- C.4.32 Section 17.6.2 The collapsing borders model
- C.4.33 Section 18.2
- C.4.34 Section A.3
- C.4.35 Appendix G.2 Lexical scanner
- C.4.36 Appendix E. References
- 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