Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
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)).
- 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