#next contents index _________________________________________________________________ W3C PR-CSS2-19980324 Cascading Style Sheets, level 2 W3C Proposed Recommendation 24-Mar-1998 This version: http://www.w3.org/TR/1998/PR-CSS2-19980324 Latest version: http://www.w3.org/TR/PR-CSS2 Previous version: http://www.w3.org/TR/1998/WD-css2-19980128 Editors: Bert Bos Håkon Wium Lie Chris Lilley Ian Jacobs Abstract This specification defines Cascading Style Sheets, level 2 (CSS2). CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance. CSS2 builds on CSS1 (see [CSS1]) and all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 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. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface. Status of this document This document is currently undergoing review by the members of the World Wide Web Consortium. It is a stable document derived from a series of working drafts produced over the last year as deliverables of the Style Sheets activity. Details of this review have been distributed to Member's representatives. Comments by non-Members should be sent to www-style@w3.org. The review period will end on 21 April, 1998 at 24:00 GMT. Within 14 days from that time, the document's disposition will be announced: it may become a W3C Recommendation (possibly with minor changes), or it may revert to Working Draft status, or it may be dropped as a W3C work item. As a Proposed Recommendation, this document does not imply any endorsement by the Consortium's staff or Member organizations. Available formats The CSS2 specification is available in the following formats: HTML: http://www.w3.org/TR/1998/PR-CSS2-19980324 a plain text file: http://www.w3.org/TR/1998/PR-CSS2-19980324/css2.txt, HTML as a gzip'ed tar file: http://www.w3.org/TR/1998/PR-CSS2-19980324/css2.tgz, HTML as a zip file (this is a '.zip' file not an '.exe'): http://www.w3.org/TR/1998/PR-CSS2-19980324/css2.zip, as well as a gzip'ed PostScript file: http://www.w3.org/TR/1998/PR-CSS2-19980324/css2.ps.gz, and a PDF file: http://www.w3.org/TR/1998/PR-CSS2-19980324/css2.pdf. In case of a discrepancy between the various forms of the specification, the HTML version is considered the definitive version. Available languages The English version of this specification is the only normative version. However, for translations in other languages see http://www.w3.org/TR/1998/PR-CSS2-19980324/translations.html. Quick Table of Contents * 1 About the CSS2 Specification * 2 Introduction to CSS2 * 3 Conformance: Requirements and Recommendations * 4 CSS2 syntax and basic data types * 5 Selectors * 6 Assigning property values, Cascading, and Inheritance * 7 Media types * 8 Box model * 9 Visual rendering model * 10 Visual rendering model details * 11 Visual effects * 12 Generated content and automatic numbering * 13 Paged media * 14 Colors and Backgrounds * 15 Fonts * 16 Text * 17 Lists * 18 Tables * 19 User interface * 20 Aural style sheets * Appendix A. A sample style sheet for HTML 4.0 * Appendix B. Changes from CSS1 * Appendix C. Implementation and performance notes * Appendix D. The grammar of CSS2 * Appendix E. References * Appendix F. Property index * Appendix G. Descriptor index * Appendix H. Index Full Table of Contents * 1 About the CSS2 Specification + 1.1 Reading the specification + 1.2 How the specification is organized + 1.3 Conventions o 1.3.1 Document language elements and attributes o 1.3.2 CSS property definitions # Value # Initial # Applies to # Inherited # Percentage values # Media groups o 1.3.3 Shorthand properties o 1.3.4 Notes and examples + 1.4 Acknowledgments + 1.5 Copyright Notice * 2 Introduction to CSS2 + 2.1 A brief CSS2 tutorial for HTML + 2.2 A brief CSS2 tutorial for XML + 2.3 The CSS2 processing model o 2.3.1 The canvas o 2.3.2 CSS2 addressing model + 2.4 CSS design principles * 3 Conformance: Requirements and Recommendations + 3.1 Definitions + 3.2 Conformance + 3.3 Error conditions + 3.4 The text/css content type * 4 CSS2 syntax and basic data types + 4.1 Syntax o 4.1.1 Tokenization o 4.1.2 Keywords o 4.1.3 Characters and case o 4.1.4 Statements o 4.1.5 At-rules o 4.1.6 Blocks o 4.1.7 Rule sets, declaration blocks, and selectors o 4.1.8 Declarations and properties o 4.1.9 Comments + 4.2 Rules for handling parsing errors + 4.3 Values o 4.3.1 Integers and real numbers o 4.3.2 Lengths o 4.3.3 Percentages o 4.3.4 URL + URN = URI o 4.3.5 Counters o 4.3.6 Colors o 4.3.7 Angles o 4.3.8 Times o 4.3.9 Frequencies o 4.3.10 Strings + 4.4 CSS document representation o 4.4.1 Referring to characters not represented in a character encoding * 5 Selectors + 5.1 Pattern matching + 5.2 Selector syntax o 5.2.1 Grouping + 5.3 Universal selector + 5.4 Type selectors + 5.5 Descendant selectors + 5.6 Child selectors + 5.7 Adjacent selectors + 5.8 Attribute selectors o 5.8.1 Matching attributes and attribute values o 5.8.2 Default attribute values in DTDs o 5.8.3 Class selectors + 5.9 ID selectors + 5.10 Pseudo-elements and pseudo-classes + 5.11 Pseudo-classes o 5.11.1 :first-child pseudo-class o 5.11.2 The link pseudo-classes: :link and :visited o 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus o 5.11.4 The language pseudo-class: :lang + 5.12 Pseudo-elements o 5.12.1 The :first-line pseudo-element o 5.12.2 The :first-letter pseudo-element o 5.12.3 The :before and :after pseudo-elements * 6 Assigning property values, Cascading, and Inheritance + 6.1 Specified, computed, and actual values o 6.1.1 Specified values o 6.1.2 Computed values o 6.1.3 Actual values + 6.2 Inheritance o 6.2.1 The 'inherit' value + 6.3 The @import rule + 6.4 The cascade o 6.4.1 Cascading order o 6.4.2 !important rules o 6.4.3 Calculating a selector's specificity o 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 o 7.2.1 The @media rule + 7.3 Recognized media types o 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' o 8.3.1 Collapsing margins + 8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding' + 8.5 Border properties o 8.5.1 Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width' o 8.5.2 Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-color' o 8.5.3 Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style' o 8.5.4 Border shorthand properties: 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border' * 9 Visual rendering model + 9.1 Introduction to the visual rendering model o 9.1.1 The viewport o 9.1.2 Containing blocks + 9.2 Controlling box generation o 9.2.1 Block-level elements and block boxes # Anonymous block boxes o 9.2.2 Inline-level elements and inline boxes # Anonymous inline boxes o 9.2.3 Compact boxes o 9.2.4 Run-in boxes o 9.2.5 The 'display' property + 9.3 Positioning schemes o 9.3.1 Choosing a positioning scheme: 'position' property o 9.3.2 Box offsets: 'top', 'right', 'bottom', 'left' + 9.4 Normal flow o 9.4.1 Block formatting context o 9.4.2 Inline formatting context o 9.4.3 Relative positioning + 9.5 Floats o 9.5.1 Positioning the float: the 'float' property o 9.5.2 Controlling flow next to floats: the 'clear' property + 9.6 Absolute positioning o 9.6.1 Fixed positioning + 9.7 Relationships between 'display', 'position', and 'float' + 9.8 Comparison of normal flow, floats, and absolute positioning o 9.8.1 Normal flow o 9.8.2 Relative positioning o 9.8.3 Floating a box o 9.8.4 Absolute positioning + 9.9 Layered presentation o 9.9.1 Specifying the stack level: the 'z-index' property + 9.10 Text direction: the 'direction' and 'unicode-bidi' properties o 9.10.1 Interaction between inline flow and text direction o 9.10.2 Bidirectionality in HTML 4.0 * 10 Visual rendering model details + 10.1 Details of containing block calculation + 10.2 Calculation of box and line box widths + 10.3 Box width calculations o 10.3.1 Content width: the 'width' property o 10.3.2 Width of boxes in the normal flow and floated boxes # Determining the content width # Computing margin widths o 10.3.3 Width of absolutely positioned boxes o 10.3.4 Minimum and maximum widths: 'min-width' and 'max-width' + 10.4 Box height calculations o 10.4.1 Content height: the 'height' property o 10.4.2 Determining the content height o 10.4.3 Height of absolutely positioned boxes o 10.4.4 Minimum and maximum heights: 'min-height' and 'max-height' + 10.5 Line height calculations: the 'line-height' and 'vertical-align' properties o 10.5.1 Leading and half-leading * 11 Visual effects + 11.1 Overflow and clipping o 11.1.1 Overflow: the 'overflow' property o 11.1.2 Clipping: the 'clip' property + 11.2 Visibility: the 'visibility' property * 12 Generated content and automatic numbering + 12.1 The :before and :after pseudo-elements + 12.2 The 'content' property + 12.3 Interaction of :before and :after with 'compact' and 'run-in' elements + 12.4 Quotation marks o 12.4.1 Specifying quotes with the 'quotes' property o 12.4.2 Inserting quotes with the 'content' property + 12.5 Automatic counters and numbering o 12.5.1 Nested counters and scope o 12.5.2 Counter styles o 12.5.3 Counters in elements with 'display: none' + 12.6 Markers * 13 Paged media + 13.1 Introduction to paged media + 13.2 Page boxes: the @page rule o 13.2.1 Page margins o 13.2.2 Page size: the 'size' property # Rendering page boxes that do not fit a target sheet # Positioning the page box on the sheet o 13.2.3 Crop marks: the 'marks' property o 13.2.4 Left, right, and first pages o 13.2.5 Content outside the page box + 13.3 Page breaks o 13.3.1 Break before/after elements: 'page-break-before', 'page-break-after', 'page-break-inside' o 13.3.2 Using named pages: 'page' o 13.3.3 Breaks inside elements: 'orphans', 'widows', and 'page-break-inside' o 13.3.4 Allowed page breaks o 13.3.5 Forced page breaks o 13.3.6 "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 o 14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background' + 14.3 Gamma correction * 15 Fonts + 15.1 Introduction + 15.2 Font specification o 15.2.1 Font specification properties o 15.2.2 Font family: the 'font-family' property o 15.2.3 Font styling: the 'font-style', 'font-variant', 'font-weight' and 'font-stretch' properties o 15.2.4 Font size: the 'font-size' and 'font-size-adjust' properties o 15.2.5 Shorthand font property: the 'font' property o 15.2.6 Generic font families # serif # sans-serif # cursive # fantasy # monospace + 15.3 Font selection o 15.3.1 Font Descriptions and @font-face o 15.3.2 Descriptors for Selecting a Font: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' and 'font-size' o 15.3.3 Descriptors for Font Data Qualification: 'unicode-range' o 15.3.4 Descriptor for Numeric Values: 'units-per-em' o 15.3.5 Descriptor for Referencing: 'src' o 15.3.6 Descriptors for Matching: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent', and 'descent' o 15.3.7 Descriptors for Synthesis: 'widths', 'bbox' and 'definition-src' o 15.3.8 Descriptors for Alignment: 'baseline', 'centerline', 'mathline', and 'topline' o 15.3.9 Examples + 15.4 Font Characteristics o 15.4.1 Introducing Font Characteristics o 15.4.2 Full font name o 15.4.3 Coordinate units on the em square o 15.4.4 Central Baseline o 15.4.5 Font Encoding o 15.4.6 Font family name o 15.4.7 Glyph widths o 15.4.8 Horizontal stem width o 15.4.9 Height of uppercase glyphs o 15.4.10 Height of lowercase glyphs o 15.4.11 Lower Baseline o 15.4.12 Mathematical Baseline o 15.4.13 Maximal bounding box o 15.4.14 Maximum unaccented height o 15.4.15 Maximum unaccented depth o 15.4.16 Panose-1 number o 15.4.17 Range of ISO 10646 characters o 15.4.18 Top Baseline o 15.4.19 Vertical stem width o 15.4.20 Vertical stroke angle + 15.5 Font matching algorithm o 15.5.1 Mapping font weight values to font names o 15.5.2 Examples of font matching * 16 Text + 16.1 Indentation: the 'text-indent' property + 16.2 Alignment: the 'text-align' property + 16.3 Decoration o 16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property o 16.3.2 Text shadows: the 'text-shadow' property + 16.4 Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties + 16.5 Case o 16.5.1 Capitalization: the 'text-transform' property o 16.5.2 Special first letter/first line + 16.6 White space: the 'white-space' property o 16.6.1 Line breaks * 17 Lists + 17.1 Visual formatting of lists o 17.1.1 List properties: 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style' * 18 Tables + 18.1 Introduction to tables + 18.2 The CSS table model o 18.2.1 Anonymous table boxes + 18.3 Column selectors + 18.4 Tables in the visual rendering model o 18.4.1 Caption position and alignment + 18.5 Visual layout of table contents o 18.5.1 Row and column spans: 'column-span', and 'row-span' o 18.5.2 Table layers and transparency o 18.5.3 Table size algorithms: the 'table-layout' property # Fixed table layout # Automatic table layout o 18.5.4 Alignment of cell boxes # Vertical alignment in a row # Horizontal alignment in a column o 18.5.5 Dynamic row and column effects + 18.6 Borders o 18.6.1 The separated borders model # Borders around empty cells: the 'empty-cells' property o 18.6.2 The collapsing border model # Border conflict resolution o 18.6.3 Border styles + 18.7 Audio rendering of tables o 18.7.1 Speaking headers: the 'speak-header' property * 19 User interface + 19.1 Cursors: the 'cursor' property + 19.2 User preferences for colors + 19.3 User preferences for fonts + 19.4 Dynamic outlines: the 'outline' property o 19.4.1 Outlines and the focus + 19.5 Magnification * 20 Aural style sheets + 20.1 Introduction to aural style sheets + 20.2 Volume properties: 'volume' + 20.3 Speaking properties: 'speak' + 20.4 Pause properties: 'pause-before', 'pause-after', and 'pause' + 20.5 Cue properties: 'cue-before', 'cue-after', and 'cue' + 20.6 Mixing properties: 'play-during' + 20.7 Spatial properties: 'azimuth' and 'elevation' + 20.8 Voice characteristic properties: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness' + 20.9 Speech properties: 'speak-punctuation' and 'speak-numeral' * Appendix A. A sample style sheet for HTML 4.0 * Appendix B. Changes from CSS1 + B.1 New functionality + B.2 Updated descriptions + B.3 Semantic changes from CSS1 * Appendix C. Implementation and performance notes + C.1 Fonts o C.1.1 Glossary of font terms o C.1.2 Font retrieval o C.1.3 Meaning of the Panose Digits o C.1.4 Deducing Unicode Ranges for TrueType o C.1.5 Automatic descriptor generation * Appendix D. The grammar of CSS2 + D.1 Grammar + D.2 Lexical scanner + D.3 Comparison of tokenization in CSS2 and CSS1 * Appendix E. References + E.1 Normative references + E.2 Informative references * Appendix F. Property index * Appendix G. Descriptor index * Appendix H. Index Copyright © 1997 W3C (MIT, INRIA, Keio ), All Rights Reserved. _________________________________________________________________ _________________________________________________________________ 1 About the CSS2 Specification Contents * 1.1 Reading the specification * 1.2 How the specification is organized * 1.3 Conventions + 1.3.1 Document language elements and attributes + 1.3.2 CSS property definitions o Value o Initial o Applies to o Inherited o Percentage values o Media groups + 1.3.3 Shorthand properties + 1.3.4 Notes and examples * 1.4 Acknowledgments * 1.5 Copyright Notice 1.1 Reading the specification This specification has been written with two types of readers in mind: CSS authors and CSS implementors. We hope the specification will provide authors with the tools they need to write efficient, attractive, and accessible documents, without overexposing them to CSS's implementation details. Implementors, however, should find all they need to build conforming user agents. The specification begins with a general presentation of CSS and becomes more and more technical and specific towards the end. For quick access to information, a general table of contents, specific tables of contents at the beginning of each section, and an index provide easy navigation, in both the electronic and printed versions. The specification has been written with two modes of presentation in mind: electronic and printed. Although the two presentations will no doubt be similar, readers will find some differences. For example, links will not work in the printed version (obviously), and page numbers will not appear in the electronic version. In case of a discrepancy, the electronic version is considered the authoritative version of the document. 1.2 How the specification is organized The specification is organized into the following sections: Section 2: An introduction to CSS2 The introduction includes a brief tutorial on CSS2 and a discussion of design principles behind CSS2. Sections 3 - 20: CSS2 reference manual. The bulk of the reference manual consists of the CSS2 language reference. This reference defines what may go into a CSS2 style sheet (syntax, properties, property values) and how user agents must interpret these style sheets in order to claim conformance. Appendixes: Appendixes contain information about a sample style sheet for HTML 4.0, changes from CSS1 , implementation and performance notes, and the grammar of CSS2, a list of normative and informative references, and three indexes: one for properties, one for descriptors, and one general index. 1.3 Conventions 1.3.1 Document language elements and attributes * CSS property, descriptor, and pseudo-class names are delimited by single quotes. * CSS values are delimited by single quotes. * Document language element names are in uppercase letters. * Document language attribute names are in lowercase letters and delimited by double quotes. 1.3.2 CSS property definitions Each CSS property definition begins with a summary of key information that resembles the following: 'property-name' Value: legal values & syntax Initial: initial value Applies to: elements this property applies to Inherited: whether the property is inherited Percentages: how percentage values are interpreted Media: which media groups the property applies to Value This part specifies the set of valid values for the property. Value types may be designated in several ways: 1. keyword values (e.g., auto, disc, etc.) 2. basic data types, which appear between "<" and ">" (e.g., , , etc.). In the electronic version of the document, each instance of a basic data type links to its definition. 3. types that have the same range of values as a property bearing the same name (e.g., <'border-width'> <'background-attachment'>, etc.). In this case, the type name is the property name (complete with quotes) between "<" and ">" (e.g., <'border-width'>). In the electronic version of the document, each instance of this type of non-terminal links to the corresponding property definition. 4. non-terminals that do not share the same name as a property. In this case, the non-terminal name appears between "<" and ">", as in . Notice the distinction between and <'border-width'>; the latter is defined in terms of the former. The definition of a non-terminal is located near its first appearance in the specification. In the electronic version of the document, each instance of this type of value links to the corresponding value definition. Other words in these definitions are keywords that must appear literally, without quotes (e.g., red). The slash (/) and the comma (,) must also appear literally. Values may be arranged as follows: * Several juxtaposed words mean that all of them must occur, in the given order. * A bar (|) separates two or more alternatives: exactly one of them must occur. * A double bar (||) separates two or more options: one or more of them must occur, in any order. * Brackets ([ ]) are for grouping. Juxtaposition is stronger than the double bar, and the double bar is stronger than the bar. Thus, the following lines are equivalent: a b | c || d e [ a b ] | [ c || [ d e ]] Every type, keyword, or bracketed group may be followed by one of the following modifiers: * An asterisk (*) indicates that the preceding type, word or group occurs zero or more times. * A plus (+) indicates that the preceding type, word or group occurs one or more times. * A question mark (?) indicates that the preceding type, word or group is optional. * A pair of numbers in curly braces ({A,B}) indicates that the preceding type, word or group occurs at least A and at most B times. The following examples illustrate different value types: Value: N | NW | NE Value: [ | thick | thin ]{1,4} Value: [ , ]* Value: ? [ / ]? Value: || Initial This part specifies the property's initial value. If the property is inherited, this is the value that is given to the root element of the document tree. Please consult the section on the cascade for information about the interaction between style sheet-specified, inherited, and initial values. Applies to This part lists the elements to which the property applies. All elements are considered to have all properties, but some properties have no rendering effect on some types of elements. For example, 'white-space' only affects block-level elements. Inherited This part indicates whether the value of the property is inherited from an ancestor element. Please consult the section on the cascade for information about the interaction between style sheet-specified, inherited, and initial values. Percentage values This part indicates how percentages should be interpreted, if they occur in the value of the property. If "N/A" appears here, it means that the property does not accept percentages as values. Media groups This part indicates the media groups to which the property applies. The conformance conditions state that user agents must support this property if they support rendering to the media types included in these media groups. 1.3.3 Shorthand properties Some properties are shorthand rules that allow authors to specify the values of several properties with a single property. For instance, the 'font' property is a shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family' all at once. When values are omitted from a shorthand form, each "missing" property is assigned its initial value (see the section on the cascade). The multiple style rules of this example: H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none } may be rewritten with a single shorthand property: H1 { font: bold 12pt/14pt Helvetica } In this example, 'font-variant', 'font-stretch', 'font-size-adjust', and 'font-style' could be omitted from the shorthand form, since they have their initial value ('normal'). 1.3.4 Notes and examples All examples that illustrate illegal usage are clearly marked as "ILLEGAL EXAMPLE". All HTML examples conform to the strict DTD (defined in [HTML40]) unless otherwise indicated by a document type declaration. All notes are informative only. Examples and notes are marked within the source HTML for the specification and CSS1 user agents will render them specially. 1.4 Acknowledgments This specification is the product of the W3C Working Group on Cascading Style Sheets and Formatting Properties. In addition to the editors of this specification, the members of the Working Group are: Brad Chase (Bitstream), Chris Wilson (Microsoft), Daniel Glazman (Electricité de France), Dave Raggett (W3C/HP), Ed Tecot (Microsoft), Jared Sorensen (Novell), Lauren Wood (SoftQuad), Laurie Anna Kaplan (Microsoft), Mike Wexler (Adobe), Murray Maloney (Grif), Powell Smith (IBM), Robert Stevahn (HP), Steve Byrne (JavaSoft), Steven Pemberton (CWI), Thom Phillabaum (Netscape), Douglas Rand (Silicon Graphics), Robert Pernett (Lotus), Dwayne Dicks (SoftQuad), and Sho Kuwamoto (Macromedia). We thank them for their continued efforts. A number of invited experts to the Working Group have contributed: George Kersher, Glenn Rippel (Bitstream), Jeff Veen (HotWired), Markku T. Hakkinen (The Productivity Works), Martin Dürst (W3C, formerly Universität Zürich), Roy Platon (RAL), Todd Fahrner (Verso), Frederick Boland (NIST), Eric Meyer (Case Western Reserve University), and Vincent Quint (W3C). The section on Web Fonts was strongly shaped by Brad Chase (Bitstream) David Meltzer (Microsoft Typography) and Steve Zilles (Adobe). The following people have also contributed in various ways to the section pertaining to fonts: Alex Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP), Dave Raggett (W3C/HP), David Opstad (Apple), David Goldsmith (Apple), Ed Tecot (Microsoft), Erik van Blokland (LettError), François Yergeau (Alis), Gavin Nicol (Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul Haeberli (SGI), and the late Phil Karlton (Netscape). The section on Paged Media was in large parts authored by Robert Stevahn (HP) and Stephen Waters (Microsoft). Robert Stevahn (HP), Scott Furman (Netscape), and Scott Isaacs (Microsoft) were key contributors to CSS Positioning. Mike Wexler (Adobe) was the editor of the interim Working Draft which described many of the new features of CSS2. T.V. Raman (Adobe) made pivotal contributions towards Aural Cascading Style Sheets (ACSS) and the concepts of aural presentation based on his work on AsTeR (Audio System For Technical Readings). He contributed an initial draft of the ACSS specification that shaped the current specification. Values for aural properties in the HTML 4.0 sample style sheet are of his devising; he currently uses them on a daily basis on his audio desktop in conjunction with Emacspeak and the Emacs W3 browser (authored by William Perry, who also implemented the aural extensions on the W3 side of the fence). Todd Fahrner (Verso) researched contemporary and historical browsers to develop the sample style sheet in the appendix. Thanks to Jan Kärrman, author of html2ps for helping so much in creating the PostScript version of the specification. Through electronic and physical encounters, the following people have contributed to the development of CSS2: Robert Cailliau, Liz Castro, James Clark, Dan Connolly, Donna Converse, Daniel Dardailler, Scott Isaacs, Geir Ivarsøy, Lou Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Vincent Mallet, Eva von Pepel, William Perry, David Siegel, Al Gilman, and Jason White. The discussions on www-style@w3.org have been influential in many key issues for CSS. Especially, we would like to thank Bjorn Backlund, Todd Fahrner, Lars Marius Garshol, Ian Hickson, Susan Lesch, Andrew Marshall, MegaZone, Eric Meyer, Russell O'Connor, David Perrell, Liam Quinn, Neil St.Laurent, Taylor, Brian Wilson, and Chris Wilson for their participation. Many thanks to Philippe Le Hégaret, whose CSS validator helped ensure correct examples and a sensible grammar. Special thanks to Arnaud Le Hors, whose engineering contributions made this document work. Adam Costello improved this specification by performing a detailed review. Lastly, thanks to Tim Berners-Lee without whom none of this would have been possible. 1.5 Copyright Notice Copyright © 1997 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved. Documents on the W3C site are provided by the copyright holders under the following license. By obtaining, using and/or copying this document, or the W3C document from which this statement is linked, you agree that you have read, understood, and will comply with the following terms and conditions: Permission to use, copy, and distribute the contents of this document, or the W3C document from which this statement is linked, in any medium for any purpose and without fee or royalty is hereby granted, provided that you include the following on ALL copies of the document, or portions thereof, that you use: 1. A link or URI to the original W3C document. 2. The pre-existing copyright notice of the original author, if it doesn't exist, a notice of the form: "Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved." 3. If it exists, the STATUS of the W3C document. When space permits, inclusion of the full text of this NOTICE should be provided. In addition, credit shall be attributed to the copyright holders for any software, documents, or other items or products that you create pursuant to the implementation of the contents of this document, or any portion thereof. No right to create modifications or derivatives is granted pursuant to this license. THIS DOCUMENT IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR TITLE; THAT THE CONTENTS OF THE DOCUMENT ARE SUITABLE FOR ANY PURPOSE; NOR THAT THE IMPLEMENTATION OF SUCH CONTENTS WILL NOT INFRINGE ANY THIRD PARTY PATENTS, COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS. COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE DOCUMENT OR THE PERFORMANCE OR IMPLEMENTATION OF THE CONTENTS THEREOF. The name and trademarks of copyright holders may NOT be used in advertising or publicity pertaining to this document or its contents without specific, written prior permission. Title to copyright in this document will at all times remain with copyright holders. _________________________________________________________________ _________________________________________________________________ 2 Introduction to CSS2 Contents * 2.1 A brief CSS2 tutorial for HTML * 2.2 A brief CSS2 tutorial for XML * 2.3 The CSS2 processing model + 2.3.1 The canvas + 2.3.2 CSS2 addressing model * 2.4 CSS design principles 2.1 A brief CSS2 tutorial for HTML In this tutorial, we show how easy it can be to design simple style sheets. For this tutorial, you will need to know a little HTML (see [HTML40]) and some basic desktop publishing terminology. We begin with a small HTML document: Bach's home page

Bach's home page

Johann Sebastian Bach was a prolific composer. To set the text color of the H1 elements to blue, you can write the following CSS rule: H1 { color: blue } A CSS rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document. The HTML 4.0 specification defines how style sheet rules may be specified for HTML documents: either within the HTML document, or via an external style sheet. To put the style sheet into the document, use the STYLE element: Bach's home page

Bach's home page

Johann Sebastian Bach was a prolific composer. For maximum flexibility, we recommend that authors specify external style sheets; they may be changed without modifying the source HTML document, and they may be shared among several documents. To link to an external style sheet, you can use the LINK element: Bach's home page

Bach's home page

Johann Sebastian Bach was a prolific composer. The LINK element specifies: * the type of link: to a "stylesheet". * the location of the style sheet via the href attribute. * the type of style sheet being linked: "text/css". To show the close relationship between a style sheet and the structured markup, we continue to use the STYLE element in this tutorial. Let's add more colors: Bach's home page

Bach's home page

Johann Sebastian Bach was a prolific composer. The style sheet now contains two rules: the first one sets the color of the BODY element to 'red', while the second one sets the color of the H1 element to 'blue'. Since no color value has been specified for the P element, it will inherit the color from its parent element, namely BODY. The H1 element is also a child element of BODY but the second rule overrides the inherited value. In CSS there are often such conflicts between different values, and this specification describes how to resolve them. CSS2 has more than 100 different properties and 'color' is one of them. Let's look at some of the others: Bach's home page

Bach's home page

Johann Sebastian Bach was a prolific composer. The first thing to notice is that several declarations are grouped within a block enclosed by curly braces ({...}), and separated by semicolons, though the last declaration may also be followed by a semicolon. The first declaration on the BODY element sets the font family to "Gill Sans". If that font isn't available, the user agent (often referred to as a "browser") will use the 'sans-serif' font family which is one of five generic font families which all users agents know. Child elements of BODY will inherit the value of the 'font-family' property. The second declaration sets the font size of the BODY element to 12 points. The "point" unit is commonly used in print-based typography to indicate font sizes and other length values. It's an example of an absolute unit which does not scale relative to the environment. The third declaration uses a relative unit which scales with regard to its surroundings. The "em" unit refers to the font size of the element. In this case the result is that the margins around the BODY element are three times wider than the font size. 2.2 A brief CSS2 tutorial for XML CSS can be used with any structured document format, for example with applications of the eXtensible Markup Language [XML10]. In fact, XML depends more on style sheets than HTML, since authors can make up their own elements that user agents don't know how to display. Here is a simple XML fragment:

Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived.
To display this fragment in a document-like fashion, we must first declare which elements are inline-level (i.e., do not cause line breaks) and which are block-level (i.e., cause line breaks). INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } The first rule declares INSTRUMENT to be inline and the second rule, with its comma-separated list of selectors, declares all the other elements to be block-level. One proposal for linking a style sheet to an XML document is to use a processing instruction:
Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived.
A visual user agent could format the above example as: Example rendering Notice that the word "flute" remains within the paragraph since it is the content of the inline element INSTRUMENT. Still, the text isn't formatted the way you would expect. For example, the headline font size should be larger than then rest of the text, and you may want to display the author's name in italic: INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 1.3em } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em } Example rendering Adding more rules to the style sheet will allow you to further improve the presentation of the document. 2.3 The CSS2 processing model This section presents one possible model of how user agents that support CSS work. This is only a conceptual model; real implementations may vary. In this model, a user agent processes a source by going through the following steps: 1. Parse the source document and create a document tree from the source document. 2. Identify the target media type. 3. Retrieve all style sheets associated with the document that are specified for the target media type. 4. Annotate every element of the document tree by assigning a single value to every property that is applicable to the target media type. Properties are assigned values according to the mechanisms described in the section on cascading and inheritance. Part of the calculation of values depends on the formatting algorithm appropriate for the target media type. For example, if the target medium is the screen, user agents apply the visual rendering model. If the destination medium is the printed page, user agents apply the page model. If the destination medium is an aural rendering device (e.g., speech synthesizer), user agents apply the aural rendering model. 5. From the annotated document tree, generate a rendering structure. Often, the rendering structure closely resembles the document tree, but it may also differ significantly, notably when authors make use of pseudo-elements and generated content. First, the rendering structure need not be "tree-shaped" at all -- the nature of the structure depends on the implementation. Second, the rendering structure may contain more or less information than the document tree. For instance, if an element in the document tree has a value of 'none' for the 'display' property, that element will generate nothing in the rendering structure. A list element, on the other hand, may generate more information in the rendering structure: the list element's content and list style information (e.g., a bullet image). Note that the CSS user agent does not alter the document tree during this phase. In particular, content generated due to style sheets is not fed back to the document language processor (e.g., for reparsing). 6. Transfer the rendering structure to the target medium (e.g., print the results, display them on the screen, render them as speech, etc.). Step 1 lies outside the scope of this specification (see, for example, [DOM]). Steps 2-5 are addressed by the bulk of this specification. Step 6 lies outside the scope of this specification. 2.3.1 The canvas For all media, the term canvas describes "the space where the rendering structure is rendered." The canvas is infinite for each dimension of the space, but rendering generally occurs within a finite region of the canvas, established by the user agent according to the target medium. For instance, user agents rendering to a screen generally impose a minimum width and choose an initial width based on the dimensions of the viewport. User agents rendering to a page generally impose width and height constraints. Aural user agents may impose limits in audio space, but not in time. 2.3.2 CSS2 addressing model CSS2 selectors and properties allow style sheets to refer to the following characteristics of a document: * Elements in the document tree and certain relationships between them (see the section on selectors). * Attributes of elements in the document tree, and values of those attributes (see the section on attribute selectors). * Some parts of element content (see the :first-line and :first-letter pseudo-elements. * Elements of the document tree when they are in a certain state (see the section on pseudo-classes). * Some aspects of the canvas where the document will be rendered. * Some system information (see the section on user interface). 2.4 CSS design principles CSS2, as CSS1 before it, is based on a set of design principles: * Forward and backward compatibility. CSS2 user agents will be able to understand CSS1 style sheets. CSS1 user agents will be able to read CSS2 style sheets and discard parts they don't understand. Also, user agents with no CSS support will be able to display style-enhanced documents. Of course, the stylistic enhancements made possible by CSS will not be rendered, but all content will be presented. * Complementary to structured documents. Style sheets complement structured documents (e.g., HTML and XML applications), providing stylistic information for the marked-up text. It should be easy to change the style sheet with little or no impact on the markup. * Vendor, platform, and device independence. Style sheets enable documents to remain vendor, platform, and device independent. Style sheets themselves are also vendor and platform independent, but CSS2 allows you to target a style sheet for a group of devices (e.g., printers). * Maintainability. By pointing to style sheets from documents, webmasters can simplify site maintenance and retain consistent look and feel throughout the site. For example, if the organization's background color changes, only one file needs to be changed. * Simplicity. CSS2 is more complex than CSS1, but it remains a simple style language which is human readable and writable. The CSS properties are kept independent of each other to the largest extent possible and there is generally only one way to achieve a certain effect. * Network performance. CSS provides for compact encodings of how to present content. Compared to images or audio files, which are often used by authors to achieve certain rendering effects, style sheets most often decrease the content size. Also, fewer network connections have to be opened which further increases network performance. * Flexibility. CSS can be applied to content in several ways. The key feature is the ability to cascade style information specified in the default (user agent) style sheet, user style sheets, linked style sheets, the document head, and in attributes for the elements forming the document body. * Richness. Providing authors with a rich set of rendering effects increases the richness of the Web as a medium of expression. Designers have been longing for functionality commonly found e.g., in desktop publishing and slide-show applications. Some of the requested rendering effects conflict with device independence, but CSS2 goes a long way toward granting designers their requests. * Alternative language bindings. The set of CSS properties described in this specification form a consistent formatting model for visual and aural presentations. This formatting model can be accessed through the CSS language, but bindings to other languages are also possible. For example, a JavaScript program may dynamically change the value of a certain element's 'color' property. * Accessibility. Last, but not least, CSS will increase accessibility to Web documents, not just for people with handicaps, but for everybody, and even for robots. By retaining textual information in text form, robots and human users alike will have more options for digesting the content. Users can provide their personal style sheets if author-suggested style sheets hinder accessibility. The cascading mechanism combines and selects from different style sheets. _________________________________________________________________ _________________________________________________________________ 3 Conformance: Requirements and Recommendations Contents * 3.1 Definitions * 3.2 Conformance * 3.3 Error conditions * 3.4 The text/css content type 3.1 Definitions In this section, we begin the formal specification of CSS2, starting with the contract between authors, users, and implementers. The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119 (see [RFC2119]). However, for readability, these words do not appear in all uppercase letters in this specification. At times, this specification recommends good practice for authors and user agents. These recommendations are not normative and conformance with this specification does not depend on their realization. These recommendations contain the expression "We recommend ...", "This specification recommends ...", or some similar wording. Style sheet A set of statements that specify presentation of a document. Style sheets may have three different origins: author, user, and user agent. The interaction of these sources is described in the section on cascading and inheritance. Valid style sheet The validity of a style sheet depends on the level of CSS used for the style sheet. All valid CSS1 style sheets are valid CSS2 style sheets. However, some changes from CSS1 mean that a few CSS1 style sheets will have slightly different semantics in CSS2. A valid CSS2 style sheet must be written according to the grammar of CSS2. Furthermore, it must contain only at-rules, property names, and property values defined in this specification. An illegal or invalid at-rule, property name, or property value is one that is not valid. Source document The document to which one or more style sheets refer. This is encoded in some language that represents the document as a tree of elements. Each element consists of a name that identifies the type of element, optionally a number of attributes, and a (possibly empty) content. Document language The encoding language of the source document (e.g., HTML or an XML application). Element (An SGML term, see [ISO8879].) The primary syntactic constructs of the document language. Most CSS style sheet rules use the names of these elements (such as "P", "TABLE", and "OL" for HTML) to specify rendering information for them. Attribute A value associated with an element, consisting of a name, and an associated (textual) value. Content The content associated with an element in the source document; not all elements have content in which case they are called empty. The content of an element may include text, and it may include a number of sub-elements, in which case the element is called the parent of those sub-elements. Rendered content The content of an element after the rendering that applies to it according to the relevant style sheets has been applied. The rendered content of a replaced element (one that causes external content to be inserted in the document) may come from outside the source document (e.g., HTML's IMG element). Rendered content may also be alternate text for an element (e.g., the value of the HTML "alt" attribute), and may include items inserted implicitly or explicitly by the style sheet, such as bullets, numbering, etc. Document tree The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none. Child An element A is called the child of element B if an only if B is the parent of A. Descendant An element A is called a descendant of an element B, if either (1) A is a child of B, or (2) A is the child of some element C that is a descendant of B. Ancestor An element A is called an ancestor of an element B, if and only if B is a descendant of A. Sibling An element A is called a sibling of an element B, if and only if B and A share the same parent element. Element A is a preceding sibling if it comes before B in the document tree. Element B is a following sibling if it comes after B in the document tree. Preceding element An element A is called a preceding element of an element B, if and only if (1) A is an ancestor of B or (2) A is a preceding sibling of B. Following element An element A is called a following element of an element B, if and only if B is a preceding element of A. Author An author is a person who writes documents and associated style sheets. An authoring tool generates documents and associated style sheets. User A user is a person who interacts with a user agent to view, hear, or otherwise use a document and its associated style sheet. The user may provide a personal style sheet that encodes personal preferences. User agent (UA) A user agent is any program that interprets a document written in the document language and applies associated style sheets according to the terms of this specification. A user agent may display a document, read it aloud, cause it to be printed, convert it to another format, etc. Here is an example of a source document encoded in HTML: My home page

My home page

Welcome to my home page! Let me tell you about my favorite composers:

  • Elvis Costello
  • Johannes Brahms
  • Georges Brassens
This results in the following tree: Sample document tree According to the definition of HTML, HEAD elements will be inferred during parsing and become part of the document tree even if the HEAD tags are not in the document source. Similarly, the parser knows where the P and LIs end, even though there are no

and tags in the source. 3.2 Conformance This section defines conformance with the CSS2 specification only. There may be other levels of CSS in the future that may require a user agent to implement a different set of features in order to conform. In general, the following points must be observed by a user agent claiming conformance to this specification: 1. It must support one or more of the CSS2 media types. 2. For each source document, it must attempt to retrieve all associated style sheets that are appropriate for the supported media types. If it cannot retrieve all associated style sheets (for instance, because of network errors), it must display the document using those it can retrieve. 3. It must parse the style sheets according to this specification. In particular, it must recognize all at-rules, blocks, declarations, and selectors (see the grammar of CSS2). If a user agent encounters a property that applies for a supported media type, the user agent must parse the value according to the property definition. This means that the user agent must accept all valid values and must ignore declarations with invalid values. User agents must ignore rules that apply to unsupported media types. 4. Given a document tree, it must assign a value for every supported property according to the rules of cascading and inheritance. 5. If the source document comes with alternate style sheets (such as with the "alternate" keyword in HTML 4.0 [HTML40]), the UA must allow the user to select one from among these style sheets and apply the selected one. Not every user agent must observe every point, however: * A user agent that inputs style sheets must respect points 1 - 3. * An authoring tool is only required to output valid style sheets * A user agent that renders a document with associated style sheets must respect points 1 - 5 and render the document according to the media-specific requirements set forth in this specification. Values may be approximated when required by the user agent. The inability of a user agent to implement part of this specification due to the limitations of a particular device (e.g., a user agent cannot render colors on a monochrome monitor or page) does not imply non-conformance. This specification recommends that a user agent allow the user to specify user style sheets. 3.3 Error conditions In general, this document does not specify error handling behavior for user agents (e.g., how they behave when they cannot find a resource designated by a URI). However, user agents must observe the rules for handling parsing errors. Since user agents may vary in how they handle error conditions, authors and users must not rely on specific error recovery behavior. 3.4 The text/css content type CSS style sheets that exist in separate files are sent over the Internet as a sequence of bytes accompanied by encoding information (see [HTML40], chapter 5). The structure of the transmission, termed a message entity, is defined by RFC 2045 and RFC 2068 (see [RFC2045] and [RFC2068]). A message entity with a content type of "text/css" represents an independent CSS document. Note. The "text/css" content type is currently being registered through IETF. _________________________________________________________________ _________________________________________________________________ 4 CSS2 syntax and basic data types Contents * 4.1 Syntax + 4.1.1 Tokenization + 4.1.2 Keywords + 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 URL + URN = URI + 4.3.5 Counters + 4.3.6 Colors + 4.3.7 Angles + 4.3.8 Times + 4.3.9 Frequencies + 4.3.10 Strings * 4.4 CSS document representation + 4.4.1 Referring to characters not represented in a character encoding 4.1 Syntax This section describes a grammar common to any version of CSS (including CSS2). Future versions of CSS will adhere to this core syntax, although they may add additional syntactic constraints. These descriptions are normative. They are also complemented by the normative grammar rules presented in Appendix D. 4.1.1 Tokenization All levels of CSS -- level 1, level 2, and any future levels -- use the same core syntax. This allows UAs to parse (though not completely understand) style sheets written in levels of CSS that didn't exist at the time the UAs were created. Designers can use this feature to create style sheets that work with older user agents, while also exercising the possibilities of the latest levels of CSS. At the lexical level, CSS style sheets consist of a sequence of tokens. The list of tokens for CSS2 is as follows. The definitions use Lex-style regular expressions. Octal codes refer to ISO 10646 ([ISO10646]). As in Lex, in case of multiple matches, the longest match determines the token. Token Definition _________________________________________________________________ IDENT {ident} ATKEYWORD @{ident} STRING {string} HASH #{name} NUMBER {num} PERCENTAGE {num}% DIMENSION {num}{ident} URI url\({w}{string}{w}\) |url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\) UNICODE-RANGE U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})? CDO ; ; { \{ } \} ( \( ) \) [ \[ ] \] S [ \t\r\n\f]+ COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/ FUNCTION {ident}\( INCLUDES ~= DASHMATCH |= DELIM any other character not matched by the above rules The macros in curly braces ({}) above are defined as follows: Macro Definition _________________________________________________________________ ident {nmstart}{nmchar}* nmstart [a-zA-Z]|{nonascii}|{escape} nonascii [^\0-\177] unicode \\[0-9a-f]{1,6}[ \n\r\t\f]? escape {unicode}|\\[ -~\200-\4177777] nmchar [a-z0-9-]|{nonascii}|{escape} num [0-9]+|[0-9]*\.[0-9]+ string {string1}|{string2} string1 \"([\t !#$%&(-~]|\\\n|\'|{nonascii}|{escape})*\" string2 \'([\t !#$%&(-~]|\\\n|\"|{nonascii}|{escape})*\' w [ \t\r\n\f]* Below is the core syntax for CSS. The sections that follow describe how to use it. Appendix D describes a more restrictive grammar that is closer to the CSS level 2 language. stylesheet : [ CDO | CDC | S | statement ]*; statement : ruleset | at-rule; at-rule : ATKEYWORD S* any* [ block | ';' S* ]; block : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*; ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*; selector : any+; declaration : property ':' S* value; property : IDENT S*; value : [ any | block | ATKEYWORD S* ]+; any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*; COMMENT tokens do not occur in the grammar (to keep it readable), but any number of these tokens may appear anywhere between other tokens. The token S in the grammar above stands for whitespace. Only the characters "space" (Unicode code 32), "tab" (9), "line feed" (10), "carriage return" (13), and "form feed" (12) can occur in whitespace. Other space-like characters, such as "em-space" (8195) and "ideographic space" (12288), are never part of whitespace. 4.1.2 Keywords Keywords have the form of identifiers. Keywords must not be placed between quotes ("..." or '...'). Thus, red is a keyword, but "red" is not. (It is a string.) Other illegal examples: width: "auto"; border: "none"; font-family: "serif"; background: "red"; 4.1.3 Characters and case The following rules always hold: * All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes 'id' and 'class', of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML. * In CSS2, identifiers (including element names, classes and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]). * In CSS2, a backslash (\) character indicates three types of character escape. First, inside a string, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline). Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit) can be escaped with a backslash to remove its special meaning. For example, "\"" is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning. Third, backslash escapes allow authors to refer to characters they can't easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number. If a digit or letter follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that: 1. with a space (or other whitespace character): "\26 B" ("&B") 2. by providing exactly 6 hexadecimal digits: "\000026B" ("&B") In fact, these two methods may be combined. Only one whitespace character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must itself either be escaped or doubled. * Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not). 4.1.4 Statements A CSS style sheet, for any version of CSS, consists of a list of statements (see the grammar above). There are two kinds of statements: at-rules and rule sets. There may be whitespace around the statements. In this specification, the expressions "immediately before" or "immediately after" mean with no intervening white space or comments. 4.1.5 At-rules At-rules start with an at-keyword, an '@' character followed by an identifier (for example, '@import', '@page'). An at-rule consists of everything up to and including the next semicolon (;) or the next block, whichever comes first. A CSS user agent that encounters an unrecognized at-rule must ignore the whole of the @-rule and continue parsing after it. CSS2 user agents must ignore any '@import' rule that occurs inside a block or that doesn't precede all rule sets. Here is an example. Assume a CSS2 parser encounters this style sheet: @import "subs.css"; H1 { color: blue } @import "list.css"; The second '@import' is illegal according to CSS2. The CSS2 parser ignores the whole at-rule, effectively reducing the style sheet to: @import "subs.css"; H1 { color: blue } In the following example, the second '@import' rule is invalid, since it occurs inside a '@media' block. @import "subs.css"; @media print { @import "print-main.css"; BODY { font-size: 10pt } } H1 {color: blue } 4.1.6 Blocks A block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there may be any characters, except that parentheses (( )), brackets ([ ]) and braces ({ }) must always occur in matching pairs and may be nested. Single (') and double quotes (") must also occur in matching pairs, and characters between them are parsed as a string. See Tokenization above for the definition of a string. Here is an example of a block. Note that the right brace between the double quotes does not match the opening brace of the block, and that the second single quote is an escaped character, and thus doesn't match the first single quote: { causta: "}" + ({7} * '\'') } Note that the above rule is not valid CSS2, but it is still a block as defined above. 4.1.7 Rule sets, declaration blocks, and selectors A rule set (also called "rule") consists of a selector followed by a declaration block. A declaration-block (also called a {}-block in the following text) starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations. The selector (see also the section on selectors) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS2), it must ignore the {}-block as well. CSS2 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future versions of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS2. For example, since the "&" is not a valid token in a CSS2 selector, a CSS2 user agent must ignore the whole second line, and not set the color of H3 to red: H1, H2 {color: green } H3, H4 & H5 {color: red } H6 {color: black } Here is a more complex example. The first two pairs of curly braces are inside a string, and do not mark the end of the selector. This is a valid CSS2 statement. P[example="public class foo\ {\ private int x;\ \ foo(int x) {\ this.x = x;\ }\ \ }"] { color: red } 4.1.8 Declarations and properties A declaration is either empty or consists of a property, followed by a colon (:), followed by a value. Around each of these there may be whitespace. Because of the way selectors work, multiple declarations for the same selector may be organized into semicolon (;) separated groups. Thus, the following rules: H1 { font-weight: bold } H1 { font-size: 12pt } H1 { line-height: 14pt } H1 { font-family: Helvetica } H1 { font-variant: normal } H1 { font-style: normal } are equivalent to: H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal } A property is an identifier. Any character may occur in the value, but parentheses ("( )"), brackets ("[ ]"), braces ("{ }"), single quotes (') and double quotes (") must come in matching pairs, and semicolons not in strings must be escaped. Parentheses, brackets, and braces may be nested. Inside the quotes, characters are parsed as a string. The syntax of values is specified separately for each property, but in any case, values are built from identifiers, strings, numbers, lengths, percentages, URIs, colors, angles, times, and frequencies. A user agent must ignore a declaration with an invalid property name or an invalid value. Every CSS2 property has its own syntactic and semantic restrictions on the values it accepts. For example, assume a CSS2 parser encounters this style sheet: H1 { color: red; font-style: 12pt } /* Invalid value: 12pt */ P { color: blue; font-vendor: any; /* Invalid prop.: font-vendor */ font-variant: small-caps } EM EM { font-style: normal } The second declaration on the first line has an invalid value '12pt'. The second declaration on the second line contains an undefined property 'font-vendor'. The CSS2 parser will ignore these declarations, effectively reducing the style sheet to: H1 { color: red; } P { color: blue; font-variant: small-caps } EM EM { font-style: normal } 4.1.9 Comments Comments begin with the characters "/*" and end with the characters "*/". They may occur anywhere between tokens, and their contents have no influence on the rendering. Comments may not be nested. CSS also allows the SGML comment delimiters ("") in certain places, but they do not delimit CSS comments. They are permitted so that style rules appearing in an HTML source document (in the STYLE element) may be hidden from pre-HTML 3.2 user agents. See the HTML 4.0 specification ([HTML40]) for more information. 4.2 Rules for handling parsing errors In some cases, user agents must ignore part of an illegal style sheet. This specification defines ignore to mean that the user agent parses the illegal part (in order to find its beginning and end), but otherwise acts as if it had not been there. To ensure that new properties and new values for existing properties can be added in the future, user agents are required to obey the following rules when they encounter these parsing errors: * Unknown properties. User agents must ignore a declaration with an unknown property. For example, if the style sheet is: H1 { color: red; rotation: 70minutes } the user agent will treat this as if the style sheet had been H1 { color: red } * Illegal values. User agents must ignore a declaration with an illegal value. For example: IMG { float: left } /* correct CSS2 */ IMG { float: left here } /* "here" is not a value of 'float' */ IMG { background: "red" } /* keywords cannot be quoted in CSS2 */ IMG { border-width: 3 } /* a unit must be specified for length values */ A CSS2 parser would honor the first rule and ignore the rest, as if the style sheet had been: IMG { float: left } IMG { } IMG { } IMG { } A user agent conforming to a future CSS specification may accept one or more of the other rules as well. * Invalid at-keywords. User agents must ignore an invalid at-keyword together with everything following it, up to and including the next semicolon (;) or block ({...}), whichever comes first. For example, consider the following: @three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } H1 { color: red } } H1 { color: blue } The '@three-dee' at-rule is not part of CSS2. Therefore, the whole at-rule (up to, and including, the third right curly brace) is ignored. A CSS2 user agent ignores it, effectively reducing the style sheet to: H1 { color: blue } 4.3 Values 4.3.1 Integers and real numbers Some value types may have integer values (denoted by ) or real number values (denoted by ). Real numbers and integers are specified in decimal notation only. An consists of one or more digits "0" to "9". A can either be an , or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. Note that many properties that allow an integer or real number as a value actually restrict the value to some range, often to a non-negative value. 4.3.2 Lengths Lengths refer to horizontal or vertical measurements. The format of a length value (denoted by in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a (with or without a decimal point) immediately followed by a unit identifier (e.g., px, deg, etc.). After the '0' length, the unit identifier is optional. Some properties allow negative length values, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be converted to the nearest value that can be supported. There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer). Relative units are: * em: the 'font-size' of the relevant font * ex: the 'x-height' of the relevant font * px: pixels, relative to the viewing device H1 { margin: 0.5em } /* em */ H1 { margin: 1ex } /* ex */ P { font-size: 12px } /* px */ The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.) The 'ex' unit is defined by the font's 'x-height'. The x-height is so called because it is often equal to the height of the lowercase "x". However, an 'ex' is be defined even for fonts that don't contain an "x". The rule: H1 { line-height: 1.2em } means that the line height of H1 elements will be 20% greater than the font size of the H1 elements. On the other hand: H1 { font-size: 1.2em } means that the font-size of H1 elements will be 20% greater than the font size inherited by H1 elements. When specified for the root of the document tree (e.g., "HTML" in HTML), 'em' and 'ex' refer to the property's initial value. Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0227 degrees. For reading at arm's length, 1px thus corresponds to about 0.28 mm (1/90 inch). When printed on a laser printer, meant for reading at a little less than arm's length (55 cm, 21 inch), 1px is about 0.21 mm. On a 300 dots-per-inch (dpi) printer, that may be rounded up to 3 dots (0.25 mm); on a 600 dpi printer, it can be rounded to 5 dots. The two images below illustrate the effect of viewing distance on the size of a pixel and the effect of a device's resolution. In the first image, a reading distance of 71 cm (28 inch) results in a px of 0.28 mm, while a reading distance of 3.5 m (12 feet) requires a px of 1.4 mm. Showing that pixels must become larger if the viewing distance increases In the second image, an area of 1px by 1px is covered by a single dot in a low-resolution device (a computer screen), while the same area is covered by 16 dots in a higher resolution device (such as a 400 dpi laser printer). Showing that more device pixels (dots) are needed to cover a 1px by 1px area on a high-resolution device than on a low-res one Child elements do not inherit the relative values specified for their parent; they inherit the actual values. For example: BODY { font-size: 12pt; text-indent: 3em; /* i.e., 36pt */ } H1 { font-size: 15pt } In these rules, the 'text-indent' value of H1 elements will be 36pt, not 45pt, if H1 is a child of the BODY element (assuming the actual font size is the same as the specified one: 12pt). Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are: * in: inches -- 1 inch is equal to 2.54 centimeters. * cm: centimeters * mm: millimeters * pt: points -- the points used by CSS2 are equal to 1/72th of an inch. * pc: picas -- 1 pica is equal to 12 points. For example: H1 { margin: 0.5in } /* inches */ H2 { line-height: 3cm } /* centimeters */ H3 { word-spacing: 4mm } /* millimeters */ H4 { font-size: 12pt } /* points */ H4 { font-size: 1pc } /* picas */ In cases where the specified length cannot be supported, user agents must approximate it. For all CSS2 properties, further computations and inheritance is be based on the approximated value. 4.3.3 Percentages The format of a percentage value (denoted by in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number immediately followed by '%'. Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the rendering context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property. Since child elements inherit the actual values of their parent, in the following example, the children of the P element will inherit a value of 12pt for 'line-height', not the percentage value (120%): P { font-size: 10pt } P { line-height: 120% } /* relative to 'font-size', i.e., 12pt */ 4.3.4 URL + URN = URI URLs (Uniform Resource Locators, see [RFC1738] and [RFC1808]) provide the address of a resource on the Web. An expected new way of identifying resources is called URN (Uniform Resource Name). Together they are called URIs (Uniform Resource Identifiers, see [URI]). This specification uses the term URI throughout. URI values in this specification are denoted by . The functional notation used to designate URIs in property values is "url()". For example: BODY { background: url(http://www.bg.com/pinkish.gif) } The format of a URI value is 'url(' followed by optional whitespace followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. Quote characters must be balanced. Parentheses, commas, whitespace characters, single quotes (') and double quotes (") appearing in a URI must be escaped with a backslash: '\(', '\)', '\,'. Depending on the type of URI, it might also be possible to write the above characters as URI-escapes (where "(" = %28, ")" = %29, etc.) as described in [URI]. In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URIs. Relative URIs (as defined in [RFC1808]) are resolved to full URIs using a base URI. RFC 1808, section 3, defines the normative algorithm for this process. For CSS style sheets, the base URI is that of the style sheet, not that of the source document. For example, suppose the following rule is located in a style sheet designated by the URI http://www.myorg.org/style/basic.css: BODY { background: url(yellow) } The background of the source document's BODY will be tiled with whatever image is described by the resource designated by the URI http://www.myorg.org/style/yellow. User agents may vary in how they handle URIs that designate unavailable or inapplicable resources. 4.3.5 Counters Counters are denoted by identifiers (see the 'counter-increment' and 'counter-reset' properties). To refer to the value of a counter, the notation 'counter()' or 'counter(, )' is used. The default style is 'decimal'. To refer to a sequence of nested counters of the same name the notation is 'counters(, )' or 'counters(, , )'. See "Nested counters and scope" in the chapter on generated content. In CSS2, the values of counters can only be referred to from the 'content' property. Note that 'none' is a possible style; 'counter(x, none)' yields an empty string. Here is a style sheet that numbers paragraphs (P) for each chapter (H1). The paragraphs are numbered with roman numerals, followed by a period and a space: P {counter-increment: par-num} H1 {counter-reset: par-num} P:before {content: counter(par-num, upper-roman) ". "} Counters that are not in the scope of any 'counter-reset', are assumed to have been reset to 0 by a 'counter-reset' on the root element. 4.3.6 Colors A is either a keyword or a numerical RGB specification. The list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are defined in HTML 4.0 ([HTML40]). BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive } The RGB color model is used in numerical color specifications. These examples all specify the same color: EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* integer range 0 - 255 */ EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */ In addition to these color keywords, users may specify keywords that correspond to the colors used by certain objects in the user's environment. Please consult the section on system colors for more information. The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This makes sure that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display. The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values, or three percentage values) followed by ')'. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Whitespace characters are allowed around the numerical values. Values outside the device gamut should be clipped: the red, green and blue values must be changed to fall within the range supported by the device. For a device whose gamut is exactly 0-255 in each of red, green, and blue (typical for CRT monitors), the three rules below are equivalent: EM { color: rgb(255,0,0) } /* integer range 0 - 255 */ EM { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */ EM { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */ EM { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */ All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with which they represent these colors, but using sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards (see [COLORIMETRY]). Conforming user agents may limit their color-displaying efforts to performing a gamma-correction on them. sRGB specifies a display gamma of 2.2 under specified viewing conditions. User agents should adjust the colors given in CSS such that, in combination with an output device's "natural" display gamma, an effective display gamma of 2.2 is produced. See the section on gamma correction for further details. Note that only colors specified in CSS are affected; e.g., images are expected to carry their own color information. 4.3.7 Angles Angle values (denoted by in the text) are used with aural style sheets. Their format is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a immediately followed by an angle unit identifier. The following are valid angle unit identifiers: * deg: degrees * grad: grads * rad: radians Angle values may be negative. They should be normalized to the range 0-360deg by the user agent. For example, -10deg and 350deg are equivalent. For example, a right angle is '90deg' or '100grad' or '1.570796326794897rad'. 4.3.8 Times Time values (denoted by