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