FPWD: Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification

Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification

http://www.w3.org/TR/2016/WD-CSS22-20160412/

Abstract


This specification defines Cascading Style Sheets level 2. CSS 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 simplifies Web authoring and site maintenance.

CSS 2.2 is the second revision of CSS level 2 [CSS2]. It corrects a few errors in CSS 2.1, the first revision of CSS level 2. It is not the latest version of CSS. See the "CSS Snapshot" [CSS] for an overview of specifications that make up the whole of CSS.

CSS level 2 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.

Status of the 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/.

Publication as a First Public 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.

This document was produced by the CSS Working Group (part of the Style Activity).

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 “CSS22” in the subject, preferably like this: “[CSS22] …summary of comment…”

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.

This document is governed by the 1 September 2015 W3C Process Document.

All changes since the previous Recommendation are listed in appendix C.
Table of Contents1 About the CSS 2.2 Specification 2 Introduction to CSS 2.2 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.2 Appendix I. IndexFull Table of Contents1 About the CSS 2.2 Specification 1.1 CSS 2.2 vs CSS 2 1.2 Reading the specification 1.3 How the specification is organized 1.4 Conventions 1.4.1 Document language elements and attributes 1.4.2 CSS property definitions 1.4.2.1 Value 1.4.2.2 Initial 1.4.2.3 Applies to 1.4.2.4 Inhrited 1.4.2.5 Percentage values 1.4.2.6 Media groups 1.4.2.7 Computed value 1.4.3 Shorthand properties 1.4.4 Notes and examples 1.4.5 Images and long descriptions 1.5 Acknowledgments 2 Introduction to CSS 2.2 2.1 A brief CSS 2.2 tutorial for HTML 2.2 A brief CSS 2.2 tutorial for XML 2.3 The CSS 2.2 processing model 2.3.1 The canvas 2.3.2 CSS 2.2 addressing model 2.4 CSS design principles 3 Conformance: Requirements and Recommendations 3.1 Definitions 3.2 UA Conformance 3.3 Error conditions 3.4 The text/css content type 4 Syntax and basic data types 4.1 Syntax 4.1.1 Tokenization 4.1.2 Keywords 4.1.2.1 Vendor-specific extensions 4.1.2.2 Informative Historical Notes 4.1.3 Characters and case 4.1.4 Statements 4.1.5 At-rules 4.1.6 Blocks 4.1.7 Rule sets, declaration blocks, and selectors 4.1.8 Declarations and properties 4.1.9 Comments 4.2 Rules for handling parsing errors 4.3 Values 4.3.1 Integers and real numbers 4.3.2 Lengths 4.3.3 Percentages 4.3.4 URLs and URIs 4.3.5 Counters 4.3.6 Colors 4.3.7 Strings 4.3. Unsupported Values 4.4 CSS style sheet representation 4.4.1 Referring to characters not represented in a character encoding 5 Selectors 5.1 Pattern matching 5.2 Selector syntax 5.2.1 Grouping 5.3 Universal selector 5.4 Type selectors 5.5 Descendant selectors 5.6 Child selectors 5.7 Adjacent sibling selectors 5.8 Attribute selectors 5.8.1 Matching attributes and attribute values 5.8.2 Default attribute values in DTDs 5.8.3 Class selectors 5.9 ID selectors 5.10 Pseudo-elements and pseudo-classes 5.11 Pseudo-classes 5.11.1 :first-child pseudo-class 5.11.2 The link pseudo-classes: :link and :visited 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus 5.11.4 The language pseudo-class: :lang 5.12 Pseudo-elements 5.12.1 The :first-line pseudo-element 5.12.2 The :first-letter pseudo-element 5.12.3 The :before and :after pseudo-elements 6 Assigning property values, Cascading, and Inheritance 6.1 Specified, computed, and actual values 6.1.1 Specified values 6.1.2 Computed values 6.1.3 Used values 6.1.4 Acual values 6.2 Inheritance 6.2.1 The 'inherit' value 6.3 The @import rule 6.4 The cascade 6.4.1 Cascading order 6.4.2 !important rules 6.4.3 Calculating a selector's specificity 6.4.4 Precedence of non-CSS presentational hints 7 Media types 7.1 Introduction to media types 7.2 Specifying media-dependent style sheets 7.2.1 The @media rule 7.3 Recognized media types 7.3.1 Media groups 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.3.1 Collapsing margins 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 bidirectional context 9 Visual formatting model 9.1 Introduction to the visual formatting model 9.1.1 The viewport 9.1.2 Containing blocks 9.2 Controlling box generation 9.2.1 Block-level elements and block boxes 9.2.1.1 Anonymous block boxes 9.2.2 Inline-level elements and inline boxes 9.2.2.1 Anonymous inline boxes 9.2.3 Run-in boxes 9.2.4 The 'display' property 9.3 Positioning schemes 9.3.1 Choosing a positioning scheme: 'position' property 9.3.2 Box offsets: 'tp', 'right', 'bottom', 'left' 9.4 Normal flow 9.4.1 Block formatting contexts 9.4.2 Inline formatting contexts 9.4.3 Relative positioning 9.5 Floats 9.5.1 Positioning the float: the 'float' property 9.5.2 Controlling flow next to floats: the 'clear' property 9.6 Absolute positioning 9.6.1 Fixed positioning 9.7 Relationships between 'display', 'position', and 'float' 9.8 Comparison of normal flow, floats, and absolute positioning 9.8.1 Normal flow 9.8.2 Relative positioning 9.8.3 Floating a box 9.8.4 Absolute positioning 9.9 Layered presentation 9.9.1 Specifying the stack level: the 'z-index' property 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 eements 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.66 Complicated cases 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 10.8.1 Leading and half-leading 11 Visual effects 11.1 Overflow and clipping 11.1.1 Overflow: the 'overflow' property 11.1.2 Clipping: the 'clip' property 11.2 Visibility: the 'visibility' property 12 Generated content, automatic numbering, and lists 12.1 The :before and :after pseudo-elements 12.2 The 'content' property 12.3 Quotation marks 12.3.1 Specifying quotes with the 'quotes' property 12.3.2 Inserting quotes with the 'content' property 12.4 Automatic counters and numbering 12.4.1 Nested counters and scope 12.4.2 Counter styles 12.4.3 Counters in elements with 'display: none' 12.5 Lists 12.5.1 Lists: the 'list-style-type', 'list-style-image', list-style-position', and 'list-style' properties 13 Paged media 13.1 Introduction to paged media 13.2 Page boxes: the @page rule 13.2.1 Page margins 13.2.2 Page selectors: selecting left, right, and first pages 13.2.3 Content outside the page box 13.3 Page breaks 13.3.1 Page break properties: 'page-break-before', 'page-break-after', 'page-break-inside' 13.3.2 Breaks inside elements: 'orphans', 'widows' 13.3.3 Allowed page breaks 13.3.4 Forced page breaks 13.3.5 "Best" page breaks 13.4 Cascading in the page context 14 Colors and Backgrounds 14.1 Foreground color: the 'color' property 14.2 The background 14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background' 15 Fonts 15.1 Introduction 15.2 Font matching algorithm 15.3 Font family: the 'font-family' propety 15.3.1 Generic font families 15.3.1.1 serif 15.3.1.2 sans-serif 15.3.1.3 cursive 15.3.1.4 fantasy 15.3.1.5 monospace 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 16.1 Indentation: the 'text-indent' property 16.2 Alignment: the 'text-align' property 16.3 Decoration 16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property 16.4 Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties 16.5 Capitalization: the 'text-transform' property 16.6 White space: the 'white-space' property 16.6.1 The 'white-space' processing model 16.6.2 Example of bidirectionality with white space collapsing 16.6.3 Control and combining characters' details 17 Tables 7.1 Introduction to tables 17.2 The CSS table model 17.2.1 Anonymous table objects 17.3 Columns 17.4 Tables in the visual formatting model 17.4.1 Caption position and alignment 17.5 Visual layout of table contents 17.5.1 Table layers and transparency 17.5.2 Table width algorithms: the 'table-layout' property 17.5.2.1 Fixed table layout 17.5.2.2 Automatic table layout 17.5.3 Table height algorithms 17.5.4 Horizontal alignment in a column 17.5.5 Dynamic row and column effects 17.6 Borders 17.6.1 The separated borders model 17.6.1.1 Borders and Backgrounds around empty cells: the 'empty-cells' property 17.6.2 The collapsing border model 17.6.2.1 Border conflict resolution 17.6.3 Border styles 18 User interface 18.1 Cursors: the 'cursor' property 18.2 System Colors 18.3 User preferences for fonts 18.4 Dynamic outlines: the 'outline' property 18.4.1 Outlines and the focus 18.5 Magnification Appendix A. Aural style sheets A.1 The media types 'aural' and 'speeh' A.2 Introduction to aural style sheets A.2.1 Angles A.2.2 Times A.2.3 Frequencies 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.11.1 Speaking headers: the 'speak-header' property A.12 Sample style sheet for HTML A.13 Emacspeak Appendix B. Bibliography B.1 Normative references B.2 Informative references Appendix C. Changes C.1 Changes since the Recommendation of 7 June 211 Appendix D. Default style sheet for HTML 4 Appendix E. Elaborate description of Stacking Contexts E.1 Definitions E.2 Painting order E.3 Notes Appendix F. Full property table Appendix G. Grammar of CSS 2.2 G.1 Grammar G.2 Lexical scanner G.3 Comparison of tokenization in CSS 2.2 and CSS1 G.4 Implementation note Appendix I. Index


next contents properties index