Cascading style sheets level 2 revision 1 CSS

[p. ??] Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Recommendation 07 June 2011 This version: http://www.w3.org/TR/2011/REC-CSS2-20110607 [p. ??] Latest version: http://www.w3.org/TR/CSS2 [p. ??] Previous versions: http://www.w3.org/TR/2011/PR-CSS2-20110412 [p. ??] http://www.w3.org/TR/2008/REC-CSS2-20080411/ [p. ??] Editors: Bert Bos [p. ??] <bert @w3.org> Tantek Çelik [p. ??] <tantek @cs.stanford.edu> Ian Hickson [p. ??] <ian @hixie.ch> Håkon Wium Lie [p. ??] <howcome @opera.com> Please refer to the errata [p. ??] for this document. This document is also available in these non-normative formats: plain text [p. ??] , gzip’ed tar file [p. ??] , zip file [p. ??] , gzip’ed PostScript [p. ??] , PDF [p. ??] . See also translations [p. ??] . Copyright [p. ??] © 2011 World Wide Web ConsortiumW3C [p. ??] ® (Massachusetts Institute of TechnologyMIT [p. ??] , European Research Consortium for Informatics and MathematicsERCIM [p. ??] , Keio [p. ??] ), All Rights Reserved. W3C liability [p. ??] , trademark [p. ??] and document use [p. ??] 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 appli- cations). 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 docu- ments to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also supports content positioning, table layout, features for internationalization 1 7 Jun 2011 17:58 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 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/. [p. ??] This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited 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. The (archived [p. ??] ) public mailing list www-style@w3.org [p. ??] (see instruc- tions [p. ??] ) 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” This document was produced by the CSS Working Group [p. ??] (part of the Style Activity [p. ??] ). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy [p. ??] . W3C maintains a public list of any patent disclosures [p. ??] 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) [p. ??] must disclose the information in accordance with section 6 of the W3C Patent Policy [p. ??] . The Working Group has created a test suite [p. ??] and an implementation report. [p. ??] 7 Jun 2011 17:582 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification All changes since the previous Working Draft, the previous Candidate Recommen- dation and the previous Recommendation are listed in appendix C. [p. 329] 3 7 Jun 2011 17:58 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Quick Table of Contents 271 About the CSS 2.1 Specification 352 Introduction to CSS 2.1 433 Conformance: Requirements and Recommendations 494 Syntax and basic data types 775 Selectors 996 Assigning property values, Cascading, and Inheritance 1077 Media types 1118 Box model 1279 Visual formatting model 17110 Visual formatting model details 19511 Visual effects 20312 Generated content, automatic numbering, and lists 22313 Paged media 23314 Colors and Backgrounds 24115 Fonts 25716 Text 26917 Tables 29718 User interface 305Appendix A. Aural style sheets 325Appendix B. Bibliography 329Appendix C. Changes 453Appendix D. Default style sheet for HTML 4 455Appendix E. Elaborate description of Stacking Contexts 459Appendix F. Full property table 467Appendix G. Grammar of CSS 2.1 475Appendix I. Index 7 Jun 2011 17:584 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Full Table of Contents 271 About the CSS 2.1 Specification 271.1 CSS 2.1 vs CSS 2 281.2 Reading the specification 281.3 How the specification is organized 291.4 Conventions 291.4.1 Document language elements and attributes 291.4.2 CSS property definitions 291.4.2.1 Value 311.4.2.2 Initial 311.4.2.3 Applies to 311.4.2.4 Inherited 311.4.2.5 Percentage values 311.4.2.6 Media groups 321.4.2.7 Computed value 321.4.3 Shorthand properties 321.4.4 Notes and examples 331.4.5 Images and long descriptions 331.5 Acknowledgments 352 Introduction to CSS 2.1 352.1 A brief CSS 2.1 tutorial for HTML 382.2 A brief CSS 2.1 tutorial for XML 392.3 The CSS 2.1 processing model 402.3.1 The canvas 402.3.2 CSS 2.1 addressing model 412.4 CSS design principles 433 Conformance: Requirements and Recommendations 433.1 Definitions 473.2 UA Conformance 483.3 Error conditions 483.4 The text/css content type 494 Syntax and basic data types 494.1 Syntax 504.1.1 Tokenization 534.1.2 Keywords 544.1.2.1 Vendor-specific extensions 544.1.2.2 Informative Historical Notes 554.1.3 Characters and case 564.1.4 Statements 574.1.5 At-rules 574.1.6 Blocks 584.1.7 Rule sets, declaration blocks, and selectors 5 7 Jun 2011 17:58 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 594.1.8 Declarations and properties 604.1.9 Comments 604.2 Rules for handling parsing errors 634.3 Values 634.3.1 Integers and real numbers 634.3.2 Lengths 674.3.3 Percentages 674.3.4 URLs and URIs 684.3.5 Counters 694.3.6 Colors 704.3.7 Strings 714.3.8 Unsupported Values 714.4 CSS style sheet representation 744.4.1 Referring to characters not represented in a character encoding 775 Selectors 775.1 Pattern matching 795.2 Selector syntax 795.2.1 Grouping 805.3 Universal selector 805.4 Type selectors 805.5 Descendant selectors 815.6 Child selectors 815.7 Adjacent sibling selectors 825.8 Attribute selectors 825.8.1 Matching attributes and attribute values 845.8.2 Default attribute values in DTDs 855.8.3 Class selectors 865.9 ID selectors 875.10 Pseudo-elements and pseudo-classes 885.11 Pseudo-classes 885.11.1 :first-child pseudo-class 895.11.2 The link pseudo-classes: :link and :visited 895.11.3 The dynamic pseudo-classes: :hover, :active, and :focus 915.11.4 The language pseudo-class: :lang 925.12 Pseudo-elements 925.12.1 The :first-line pseudo-element 945.12.2 The :first-letter pseudo-element 975.12.3 The :before and :after pseudo-elements 996 Assigning property values, Cascading, and Inheritance 996.1 Specified, computed, and actual values 996.1.1 Specified values 1006.1.2 Computed values 1006.1.3 Used values 7 Jun 2011 17:586 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 1006.1.4 Actual values 1006.2 Inheritance 1016.2.1 The ’inherit’ value 1026.3 The @import rule 1026.4 The cascade 1036.4.1 Cascading order 1046.4.2 !important rules 1046.4.3 Calculating a selector’s specificity 1056.4.4 Precedence of non-CSS presentational hints 1077 Media types 1077.1 Introduction to media types 1077.2 Specifying media-dependent style sheets 1087.2.1 The @media rule 1087.3 Recognized media types 1107.3.1 Media groups 1118 Box model 1118.1 Box dimensions 1138.2 Example of margins, padding, and borders 8.3 Margin properties: ’margin-top’, ’margin-right’, ’margin-bottom’, 115’margin-left’, and ’margin’ 1178.3.1 Collapsing margins 8.4 Padding properties: ’padding-top’, ’padding-right’, ’padding-bottom’, 119’padding-left’, and ’padding’ 1208.5 Border properties 8.5.1 Border width: ’border-top-width’, ’border-right-width’, 120’border-bottom-width’, ’border-left-width’, and ’border-width’ 8.5.2 Border color: ’border-top-color’, ’border-right-color’, 122’border-bottom-color’, ’border-left-color’, and ’border-color’ 8.5.3 Border style: ’border-top-style’, ’border-right-style’, 123’border-bottom-style’, ’border-left-style’, and ’border-style’ 8.5.4 Border shorthand properties: ’border-top’, ’border-right’, 124’border-bottom’, ’border-left’, and ’border’ 1268.6 The box model for inline elements in bidirectional context 1279 Visual formatting model 1279.1 Introduction to the visual formatting model 1289.1.1 The viewport 1289.1.2 Containing blocks 1299.2 Controlling box generation 1299.2.1 Block-level elements and block boxes 1299.2.1.1 Anonymous block boxes 1319.2.2 Inline-level elements and inline boxes 1329.2.2.1 Anonymous inline boxes 1329.2.3 Run-in boxes 1329.2.4 The ’display’ property 7 7 Jun 2011 17:58 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 1349.3 Positioning schemes 1349.3.1 Choosing a positioning scheme: ’position’ property 1359.3.2 Box offsets: ’top’, ’right’, ’bottom’, ’left’ 1379.4 Normal flow 1389.4.1 Block formatting contexts 1389.4.2 Inline formatting contexts 1419.4.3 Relative positioning 1429.5 Floats 1469.5.1 Positioning the float: the ’float’ property 1489.5.2 Controlling flow next to floats: the ’clear’ property 1519.6 Absolute positioning 1519.6.1 Fixed positioning 1539.7 Relationships between ’display’, ’position’, and ’float’ 1549.8 Comparison of normal flow, floats, and absolute positioning 1559.8.1 Normal flow 1559.8.2 Relative positioning 1569.8.3 Floating a box 1599.8.4 Absolute positioning 1639.9 Layered presentation 1639.9.1 Specifying the stack level: the ’z-index’ property 1659.10 Text direction: the ’direction’ and ’unicode-bidi’ properties 17110 Visual formatting model details 17110.1 Definition of "containing block" 17410.2 Content width: the ’width’ property 17510.3 Calculating widths and margins 17510.3.1 Inline, non-replaced elements 17510.3.2 Inline, replaced elements 17610.3.3 Block-level, non-replaced elements in normal flow 17610.3.4 Block-level, replaced elements in normal flow 17710.3.5 Floating, non-replaced elements 17710.3.6 Floating, replaced elements 17710.3.7 Absolutely positioned, non-replaced elements 17910.3.8 Absolutely positioned, replaced elements 17910.3.9 ’Inline-block’, non-replaced elements in normal flow 17910.3.10 ’Inline-block’, replaced elements in normal flow 17910.4 Minimum and maximum widths: ’min-width’ and ’max-width’ 18210.5 Content height: the ’height’ property 18410.6 Calculating heights and margins 18410.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 185replaced elements 10.6.3 Block-level non-replaced elements in normal flow when ’over- 7 Jun 2011 17:588 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 185flow’ computes to ’visible’ 18610.6.4 Absolutely positioned, non-replaced elements 18710.6.5 Absolutely positioned, replaced elements 18710.6.6 Complicated cases 18710.6.7 ’Auto’ heights for block formatting context roots 18810.7 Minimum and maximum heights: ’min-height’ and ’max-height’ 18910.8 Line height calculations: the ’line-height’ and ’vertical-align’ properties 19010.8.1 Leading and half-leading 19511 Visual effects 19511.1 Overflow and clipping 19511.1.1 Overflow: the ’overflow’ property 19811.1.2 Clipping: the ’clip’ property 20111.2 Visibility: the ’visibility’ property 20312 Generated content, automatic numbering, and lists 20312.1 The :before and :after pseudo-elements 20512.2 The ’content’ property 20712.3 Quotation marks 20712.3.1 Specifying quotes with the ’quotes’ property 20912.3.2 Inserting quotes with the ’content’ property 21012.4 Automatic counters and numbering 21212.4.1 Nested counters and scope 21412.4.2 Counter styles 21412.4.3 Counters in elements with ’display: none’ 21412.5 Lists 12.5.1 Lists: the ’list-style-type’, ’list-style-image’, ’list-style-position’, 215and ’list-style’ properties 22313 Paged media 22313.1 Introduction to paged media 22413.2 Page boxes: the @page rule 22413.2.1 Page margins 22613.2.2 Page selectors: selecting left, right, and first pages 22713.2.3 Content outside the page box 22713.3 Page breaks 13.3.1 Page break properties: ’page-break-before’, ’page-break-after’, 227’page-break-inside’ 22913.3.2 Breaks inside elements: ’orphans’, ’widows’ 22913.3.3 Allowed page breaks 23013.3.4 Forced page breaks 23013.3.5 "Best" page breaks 23113.4 Cascading in the page context 23314 Colors and Backgrounds 23314.1 Foreground color: the ’color’ property 23314.2 The background 9 7 Jun 2011 17:58 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 14.2.1 Background properties: ’background-color’, ’background-image’, ’background-repeat’, ’background-attachment’, ’background-position’, 234and ’background’ 24115 Fonts 24115.1 Introduction 24115.2 Font matching algorithm 24215.3 Font family: the ’font-family’ property 24415.3.1 Generic font families 24415.3.1.1 serif 24515.3.1.2 sans-serif 24615.3.1.3 cursive 24615.3.1.4 fantasy 24615.3.1.5 monospace 24715.4 Font styling: the ’font-style’ property 24715.5 Small-caps: the ’font-variant’ property 24815.6 Font boldness: the ’font-weight’ property 25115.7 Font size: the ’font-size’ property 25315.8 Shorthand font property: the ’font’ property 25716 Text 25716.1 Indentation: the ’text-indent’ property 25816.2 Alignment: the ’text-align’ property 25916.3 Decoration 16.3.1 Underlining, overlining, striking, and blinking: the ’text-decora- 259tion’ property 16.4 Letter and word spacing: the ’letter-spacing’ and ’word-spacing’ prop- 262erties 26316.5 Capitalization: the ’text-transform’ property 26416.6 White space: the ’white-space’ property 26516.6.1 The ’white-space’ processing model 26616.6.2 Example of bidirectionality with white space collapsing 26716.6.3 Control and combining characters’ details 26917 Tables 26917.1 Introduction to tables 27117.2 The CSS table model 27317.2.1 Anonymous table objects 27517.3 Columns 27617.4 Tables in the visual formatting model 27717.4.1 Caption position and alignment 27817.5 Visual layout of table contents 27917.5.1 Table layers and transparency 28217.5.2 Table width algorithms: the ’table-layout’ property 28317.5.2.1 Fixed table layout 28417.5.2.2 Automatic table layout 28517.5.3 Table height algorithms 7 Jun 2011 17:5810 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification [...]... 409 409 410 410 410 411 411 411 411 411 411 4 12 4 12 4 12 4 12 21 Cascading Style Sheets Level 2 Revision 1 (CSS 2. 1) Specification C.7 .27 Section 9 .2. 1. 1 Anonymous block boxes 413 C.7 .28 Section 9 .2. 1. 1 Anonymous block boxes 413 C.7 .29 Section 9 .2. 1. 1 Anonymous block boxes 413 C.7.30 Section 9 .2. 1. 1 Anonymous block boxes 413 C.7. 31 Section 9 .2. 2 Inline -level elements... C .1. 1 Section 4.3.6 Colors C .1 .2 Section 9 .2. 4 The ’display’ property C .1. 3 Section 12 . 2 The ’content’ property 7 Jun 20 11 17 :58 28 7 28 7 28 8 28 8 29 0 29 1 29 2 29 4 29 7 29 7 29 8 300 300 3 02 303 305 305 306 307 307 307 308 309 310 311 3 12 313 316 319 320 3 21 323 324 325 325 327 329 343 343 343 343 11 Cascading Style Sheets Level 2 Revision 1 (CSS. .. C .2. 12 0 Section 17 .6 Borders 364 C .2. 12 1 Section 17 .6 .1 The separated borders model 364 14 7 Jun 20 11 17 :58 Cascading Style Sheets Level 2 Revision 1 (CSS 2. 1) Specification C .2. 12 2 Section 17 .6 .1. 1 Borders and Backgrounds around empty cells 364 C .2. 12 3 Section 17 .6 .2 The collapsing border model 364 C .2. 12 4 Section 17 .6 .2. 1 Border conflict resolution 365 C .2. 12 5 Section 18 .1. .. tokenization in CSS 2. 1 and CSS1 4 71 G.4 Implementation note 4 72 Appendix I Index 475 7 Jun 20 11 17 :58 25 Cascading Style Sheets Level 2 Revision 1 (CSS 2. 1) Specification 26 7 Jun 20 11 17 :58 About the CSS 2. 1 Specification 1 About the CSS 2. 1 Specification Contents 1. 1 CSS 2. 1 vs CSS 2 1 .2 Reading the specification 1. 3 How the specification is organized 1. 4 Conventions... 423 C.7. 62 Section 11 .1 Overflow and clipping 423 C.7.63 Section 11 .1. 1 Overflow: the ’overflow’ property 423 C.7.64 Section 11 .1. 1 Overflow: the ’overflow’ property 424 22 7 Jun 20 11 17 :58 Cascading Style Sheets Level 2 Revision 1 (CSS 2. 1) Specification C.7.65 Section 11 .1. 1 Overflow: the ’overflow’ property 424 C.7.66 Section 11 .1 .2 Clipping: the ’clip’ property 424 C.7.67... and clipping 3 82 C.4.54 Section 11 .1. 1 Overflow 3 82 C.4.55 Section 11 .1 .2 Clipping 3 82 C.4.56 Section 11 .2 Visibility 3 82 C.4.57 Section 12 . 1 The :before and :after pseudo-elements 3 82 7 Jun 20 11 17 :58 17 Cascading Style Sheets Level 2 Revision 1 (CSS 2. 1) Specification C.4.58 Section 12 . 2 The ’content’ property 383 C.4.59 Section 12 . 3 .2 Inserting quotes... (Microsoft Corp.) 34 7 Jun 20 11 17 :58 Introduction to CSS 2. 1 2 Introduction to CSS 2. 1 Contents 2. 1 A brief CSS 2. 1 tutorial for HTML 2. 2 A brief CSS 2. 1 tutorial for XML 2. 3 The CSS 2. 1 processing model 2. 3 .1 The canvas 2. 3 .2 CSS 2. 1 addressing model 2. 4 CSS design principles 35 38 39 40 40 41 2. 1 A brief CSS 2. 1 tutorial for HTML This... C .2. 10 5 Section 16 .3 .1 Underlining, over lining, striking, and blinking 3 61 C .2. 10 6 Section 16 .4 Letter and word spacing 3 62 C .2. 10 7 Section 16 .5 Capitalization 3 62 C .2. 10 8 Section 16 .6 White space 3 62 C .2. 10 9 Chapter 17 Tables 3 62 C .2. 11 0 Section 17 .2 The CSS table model 3 62 C .2. 11 1 Section 17 .2. 1 Anonymous table objects 3 62 C .2. 1 12 Section 17 .4 Tables in... Section 14 .3 Gamma correction 360 C .2. 97 Chapter 15 Fonts 360 C .2. 98 Section 15 .2 Font matching algorithm 360 C .2. 99 Section 15 .2. 2 Font family 360 C .2. 10 0 Section 15 .5 Small-caps 3 61 C .2. 10 1 Section 15 .6 Font boldness 3 61 C .2. 1 02 Section 15 .7 Font size 3 61 C .2. 10 3 Chapter 16 Text 3 61 C .2. 10 4 Section 16 .2 Alignment 3 61 C .2. 10 5... formatting model 363 C .2. 11 3 Section 17 .4 .1 Caption position and alignment 363 C .2. 11 4 Section 17 .5 Visual layout of table contents 363 C .2. 11 5 Section 17 .5 .1 Table layers and transparency 363 C .2. 11 6 Section 17 .5 .2. 1 Fixed table layout 363 C .2. 11 7 Section 17 .5 .2. 2 Automatic table layout 363 C .2. 11 8 Section 17 .5.3 Table height algorithms 364 C .2. 11 9 Section 17 .5.4 Horizontal . 13 7 Jun 20 11 17 :58 Cascading Style Sheets Level 2 Revision 1 (CSS 2. 1) Specification 357C .2. 79 Section 11 .1 Overflow and clipping 357C .2. 80 Section 11 .1. 1 Overflow 357C .2. 81 Section 11 .1 .2. Index 7 Jun 20 11 17 :584 Cascading Style Sheets Level 2 Revision 1 (CSS 2. 1) Specification Full Table of Contents 27 1 About the CSS 2. 1 Specification 27 1. 1 CSS 2. 1 vs CSS 2 28 1 .2 Reading the. spacing 362C .2. 10 7 Section 16 .5 Capitalization 362C .2. 10 8 Section 16 .6 White space 362C .2. 10 9 Chapter 17 Tables 362C .2. 11 0 Section 17 .2 The CSS table model 362C .2. 11 1 Section 17 .2. 1 Anonymous