WD-css2-19980128 Cascading Style Sheets, level 2 W3C Working Draft 28-Jan-1998 This version: http://www.w3.org/TR/1998/WD-css2-19980128 Latest version: http://www.w3.org/TR/WD-css2 Previous version: http://www.w3.org/TR/WD-CSS2-971104 Editors: Bert Bos Håkon Wium Lie Chris Lilley Ian Jacobs Abstract This specification defines Cascading Style Sheet, 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 and XML). The CSS2 language is human readable and writable, and expresses style in common desktop publishing terminology. CSS2 builds on [CSS1], specified in http://www.w3.org/TR/REC-CSS1-961217. All valid CSS1 style sheets are valid CSS2 style sheets. Status of this document This is a W3C Working Draft for review by W3C members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". This is work in progress and does not imply endorsement by, or the consensus of, either W3C or members of the CSS working group. This document has been produced as part of the W3C Style Activity, and is intended as a draft of a proposed recommendation for CSS2. If you did not get this document directly from the W3C website you may want to check whether you have the latest version of this document by looking at the list of W3C technical reports at . Available formats The CSS2 specification is also available in the following formats: a plain text file: http://www.w3.org/TR/1998/WD-css2-19980128/css20.txt, HTML as a gzip'ed tar file: http://www.w3.org/TR/1998/WD-css2-19980128/css20.tgz, HTML as a zip file (this is a '.zip' file not an '.exe'): http://www.w3.org/TR/1998/WD-css2-19980128/css20.zip, as well as a postscript file: http://www.w3.org/TR/1998/WD-css2-19980128/css20.ps, and a PDF file: http://www.w3.org/TR/1998/WD-css2-19980128/css20.pdf. In case of a discrepancy between electronic and printed forms of the specification, the electronic 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/WD-css2-19980128/translations.html. Comments Please send detailed comments on this document to the editors. We cannot guarantee a personal response but we will try when it is appropriate. Public discussion on CSS features takes place on www-style@w3.org and messages are archived at http://lists.w3.org/Archives/Public/www-style/. 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. Visual rendering model 9. Visual rendering model details 10. Visual effects 11. Generated content and automatic numbering 12. Paged media 13. Colors and Backgrounds 14. Fonts 15. Text 16. Lists 17. Tables 18. User interface 19. Aural style sheets A. Appendix A: A sample style sheet for HTML 4.0 B. Appendix B: Changes from CSS1 C. Appendix C: Implementation and performance notes D. Appendix D: The grammar of CSS2 * References * Property index * Descriptor index * Index Full Table of Contents 1. About the CSS2 Specification 1. Reading the specification 2. How the specification is organized 3. Conventions 1. Document language elements and attributes 2. CSS property definitions 1. Shorthand properties 3. Notes and examples 4. Acknowledgments 5. Copyright Notice 2. Introduction to CSS2 1. A brief CSS2 tutorial for HTML 2. A brief CSS2 tutorial for XML 3. The CSS2 processing model 1. The canvas 2. CSS2 addressing model 4. CSS design principles 3. Conformance: Requirements and Recommendations 1. Definitions 2. Conformance 3. Error conditions 4. CSS2 syntax and basic data types 1. Syntax 1. Tokenization 2. Characters and case 3. Statements 4. At-rules 5. Blocks 6. Rule sets, declaration blocks, and selectors 7. Declarations and properties 8. Comments 2. Rules for handling parsing errors 3. Values 1. Integers and real numbers 2. Lengths 3. Percentages 4. URIs 5. Colors 6. Angles 7. Times 8. Frequencies 9. Strings 4. CSS embedded in HTML 5. CSS as a stand-alone file 6. Character escapes in CSS 5. Selectors 1. Pattern matching 2. Universal selector 3. Type selectors 4. Descendant selectors 5. Child selectors 1. :first-child pseudo-class 6. Adjacent selectors 7. Attribute selectors 1. Matching attributes and attribute values 1. Reusing the value of an attribute 2. The "class" attribute in HTML 8. ID selectors 9. Grouping 10. Pseudo-elements and pseudo-classes 1. The :first-line pseudo-element 2. The :first-letter pseudo-element 3. The :before and :after pseudo-elements 4. Pseudo-elements with descendant selectors 5. The Anchor pseudo-classes: :link, :visited, :hover, and :active 6. Combining pseudo-elements with attribute selectors 6. Assigning property values, Cascading, and Inheritance 1. Specified, computed, and absolute values 1. Specified values 2. Computed values 3. Actual values 2. Inheritance 1. The inherit value 3. The cascade 1. Cascading order 2. 'Important' rules 3. Cascading order in HTML 4. Precedence of non-CSS presentational hints 7. Media types 1. Introduction to media types 2. Specifying media-dependent style sheets 1. The @media rule 2. The media-dependent @import rule 3. Recognized media types 1. Media groups 8. Visual rendering model 1. Introduction to the visual rendering model 1. The viewport 2. The box model 1. Controlling box generation: the 'display' property 1. Compact and run-in boxes 2. Box dimensions 3. Example of margins, padding, and borders 3. Positioning schemes 1. Choosing a positioning scheme: 'position' property 2. Box offsets: 'top', 'right', 'bottom', 'left' 4. Normal flow 1. Anonymous boxes 2. Block formatting context 3. Inline formatting context 4. Direction of inline flow: the 'direction' property 5. Relative positioning 5. Floats: the 'float' and 'clear' properties 1. Controlling flow next to floats 6. Absolute positioning 1. Fixed positioning 7. Relationships between 'display', 'position', and 'float' 8. Comparison of normal, relative, floating, absolute positioning 1. Normal flow 2. Relative positioning 3. Floating a box 4. Absolute positioning 9. Z-order: Layered presentation 1. Specifying the stack level: the 'z-index' property 9. Visual rendering model details 1. Margin, border, and padding properties 1. Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' 2. Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding' 3. Border properties 1. Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width' 2. Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-color' 3. Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style' 4. Border shorthand properties: 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border' 2. Containing blocks 3. Box width calculations 1. Content width: the 'width' property 2. Widths of boxes in the normal flow and floated boxes 1. Determining the content width 2. Computing margin widths 3. Width of absolutely positioned elements 4. Minimum and maximum widths: 'min-width' and 'max-width' 4. Box height calculations 1. Content height: the 'height' property 2. Determining the content height 3. Height of absolutely positioned elements 4. Minimum and maximum heights: 'min-height' and 'max-height' 5. Collapsing margins 6. Line height calculations: the 'line-height' and 'vertical-align' properties 1. Leading and half-leading 7. Floating constraints 10. Visual effects 1. Overflow and clipping 1. Overflow: the 'overflow' property 2. Clipping: the 'clip' property 2. Visibility: the 'visibility' property 11. Generated content and automatic numbering 1. The :before and :after pseudo elements and the 'content' property 2. Automatic counters and numbering 12. Paged media 1. Introduction to paged media 2. Page boxes: the @page rule 1. Page margins 2. Page size: the 'size' property 1. Rendering page boxes that do not fit a target sheet 2. Positioning the page box on the sheet 3. Crop marks: the 'marks' property 4. Left, right, and first pages 5. Content outside the page box 3. Page breaks 1. Page break properties: 'page-break-before', 'page-break-after', 'orphans', and 'widows' 2. Allowed page breaks 3. Forced page breaks 4. "Best" page breaks 4. Cascading in the page context 13. Colors and Backgrounds 1. Foreground color: the 'color' property 2. The background 1. Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background' 14. Fonts 1. Introduction 2. Font specification 1. Font specification properties 2. Font family: the 'font-family' 3. Font style: the 'font-style', 'font-variant', and 'font-weight' properties 4. Font size: the 'font-size' and 'font-size-adjust' properties 5. Shorthand font property: the 'font' property 6. Generic font families 1. serif 2. sans-serif 3. cursive 4. fantasy 5. monospace 3. Font selection 1. Font Descriptions and @font-face 2. Descriptors for Selecting a Font: 'font-family', 'font-style', 'font-variant', 'font-weight', and 'font-size' 3. Descriptors for Font Data Qualification: 'unicode-range' 4. Descriptor for Numeric Values: 'units-per-em' 5. Descriptor for Referencing: 'src' 6. Descriptors for Matching: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent', and 'descent' 7. Descriptors for Synthesis: 'widths' and 'definition-src' 8. Descriptors for Alignment: 'baseline', 'centerline', 'mathline', and 'topline' 4. Font Characteristics 1. Introducing Font Characteristics 2. Adorned font name 3. Central Baseline 4. Co-ordinate units on the em square 5. Font encoding tables 6. Font family name 7. Glyph Representation widths 8. Horizontal stem width 9. Height of capital glyph representations 10. Height of lowercase glyph representations 11. Lower Baseline 12. Mathematical Baseline 13. Maximal bounding box 14. Maximum unaccented height 15. Maximum unaccented depth 16. Panose-1 number 17. Range of ISO10646characters 18. Top Baseline 19. Vertical stem width 20. Vertical stroke angle 5. Font matching algorithm 1. Examples of font matching 15. Text 1. Indentation: the 'text-indent' property 2. Alignment the 'text-align' property 3. Decoration 1. Underlining, over lining, striking, and blinking: the 'text-decoration' property 2. Text shadows: the 'text-shadow' property 4. Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties 5. Case 1. Capitalization: the 'text-transform' property 2. Special first letter/first line 6. White space: the 'white-space' property 7. Text in HTML 1. Forcing a line break 16. Lists 1. Visual formatting of lists 1. List properties: 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style' 17. Tables 1. Building visual tables 1. The 'display' property 2. Cell spanning properties: 'column-span', and 'row-span' 2. Layout model of elements inside tables 1. Margins on rows, columns and cells 2. Interactions between rows and columns 1. Labeled diagram: 3. The 'border-collapse' property 4. The border styles 3. Computing widths and heights 1. The 'table-layout' property 2. The 'collapse' value for the 'visibility' property 4. 'Vertical-align' on table cells 5. Table elements in selectors 1. Columns and cell selectors 2. Row, column and cell pseudo-classes 1. Row pseudo-classes: 2. Column pseudo-classes: 6. HTML 4.0 default table stylesheet 7. UNDER CONSTRUCTION! -material yet to be integrated, substituted, or discarded 1. Table layout 2. Computing widths and heights 3. Placement of the borders: 'cell-spacing' 4. Conflict resolution for borders 5. Properties for columns and rows 6. Vertical alignment of cells in a row 7. Horizontal alignment of cells in a column 8. Table captions: the 'caption-side' property 9. Generating speech: the 'speak-header' property 10. Table implementation notes 18. User interface 1. Cursors: the 'cursor' property 2. User preferences for colors 3. User preferences for fonts 4. Other rendering issues that depend on user agents 1. Magnification 19. Aural style sheets 1. Introduction to aural style sheets 2. Volume properties: 'volume' 3. Speaking properties: 'speak' 4. Pause properties: 'pause-before', 'pause-after', and 'pause' 5. Cue properties: 'cue-before', 'cue-after', and 'cue' 6. Mixing properties: 'play-during' 7. Spatial properties: 'azimuth' and 'elevation' 8. Voice characteristic properties: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness' 9. Speech properties: 'speak-punctuation', 'speak-date', 'speak-numeral', and 'speak-time' A. Appendix A: A sample style sheet for HTML 4.0 B. Appendix B: Changes from CSS1 1. New functionality 2. Updated descriptions 3. Changes C. Appendix C: Implementation and performance notes 1. Order of property value calculation 2. Colors 1. Gamma Correction 3. Fonts 1. Glossary of font terms 2. Font retrieval 3. Meaning of the Panose Digits 4. Deducing Unicode Ranges for TrueType D. Appendix D: The grammar of CSS2 1. Grammar 2. Lexical scanner * References o Normative references o Informative references * Property index * Descriptor index * Index Copyright © 1997 W3C (MIT, INRIA, Keio ), All Rights Reserved. About the CSS2 Specification 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 - 19: 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: Five appendixes contain information about a sample style sheet for HTML 4.0, changes from CSS1 , implementation and performance notes, and the grammar of CSS2. References: A list of normative and informative references. General index: The general index contains links to key concepts, property and value definitions, and other useful information. 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 upper case letters. * Document language attribute names are in lower case 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: Possible constant values or value types Initial: The initial value Applies to: Elements this property applies to Inherited: Whether the property is inherited Percentage values:How percentage values should be interpreted Media groups: Which media groups this property applies to The categories have the following meanings: Value This part of the property definition specifies the set of valid values for the property. Value types may be designated in several ways: 1. constant 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. non-terminals 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 non-terminal 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 ">" (e.g., ) and its definition is located near its first appearance in the specification. In the electronic version of the document, each instance of this type of non-terminal 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: o Several juxtaposed words mean that all of them must occur, in the given order. o A bar (|) separates alternatives: one of them must occur. o A double bar (A || B) means that either A or B or both must occur, in any order. o 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: o An asterisk (*) indicates that the preceding type, word or group is repeated zero or more times. o A plus (+) indicates that the preceding type, word or group is repeated one or more times. o A question mark (?) indicates that the preceding type, word or group is optional. o A pair of numbers in curly braces ({A,B}) indicates that the preceding type, word or group is repeated 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 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 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' has no effect on inline elements. Inherited Indicates whether the value of the property is inherited from a ancestor element. Please consult the section on the cascade for information about the interaction between style sheet-specified, inherited, and initial values. Percentage values 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 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.2.1 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 either inherits its value or is assigned its initial value (see the section on the cascade). The multiple style rules of the previous example: H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; } may be rewritten with a single shorthand property: H1 { font: bold 12pt/14pt Helvetica } In this example, 'font-variant' and 'font-style' have been omitted from the shorthand form, so they must be assigned either an inherited or initial value. 1.3.3 Notes and examples All examples illustrating deprecated usage are marked as "DEPRECATED EXAMPLE". Deprecated examples also include recommended alternate solutions. All examples that illustrate illegal usage are clearly marked as "ILLEGAL EXAMPLE". All [HTML40] examples conform to the strict DTD unless otherwise indicated by a document type declaration. Examples and notes are marked within the source HTML for the specification and some user agents may 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), and Thom Phillabaum (Netscape). 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 (Universität Zürich), Roy Platon (RAL), Todd Fahrner (Verso) 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 and the concepts of aural presentation. 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: James Clark, Dan Connolly, Douglas Rand, Sho Kuwamoto, Donna Converse, Scott Isaacs, Lou Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Vincent Mallet, Philippe Le Hégaret, William Perry, David Siegel, Al Gilman, Jason White, Daniel Dardailler, Eva von Pepel, Robert Cailliau. 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, MegaZone, Eric Meyer, Brian Wilson, Lars Marius Garshol, David Perrell, Liam Quinn, Neil St. Laurent, Andrew Marshall, Douglas Rand and Chris Wilson for their participation. Special thanks to Arnaud Le Hors, whose engineering contributions made this document work. 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 1. A brief CSS2 tutorial for HTML 2. A brief CSS2 tutorial for XML 3. The CSS2 processing model 1. The canvas 2. CSS2 addressing model 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 [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 [HTML40] 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". 2.2 A brief CSS2 tutorial for XML CSS can be used with any structured document format, for example [XML]. In fact, XML depends more on style sheets than HTML since authors can make up their own elements which user agents don't know how to display. Here is a simple XML fragment:

Fredrick the Great meets Bach Johann Nikolaus Forkel Potsdam 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 (i.e., do not cause line breaks) and which are block-level (i.e., cause line breaks). INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, LOCATION, 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. It's not yet clear how style sheets will be linked to XML documents, but assuming the above CSS fragment is combined with the XML fragment, a visual user agent could format the result as: Fredrick the Great meets Bach Johann Nikolaus Forkel Potsdam 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. 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, LOCATION, PARA { display: block } HEADLINE { font-size: 1.5em } AUTHOR { font-style: italic } [add image, description] 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 node 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. The rendering structure may differ significantly from the document tree. 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). 6. Transfer the rendering structure to the target medium (e.g., print the results, display them on the screen, render text 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 authors to refer to the following "entities" from within a style sheet: * 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 set of design principles: * Backward compatibility. User agents supporting CSS2 will be able to understand CSS1 style sheets, while CSS1 user agents are able to read CSS2 style sheets and discarding parts they don't understand. Also, user agents with no CSS support will be able to view style-enhances 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), 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 be 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 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 read- and writable. The CSS properties are kept independent of each other to the largest extent possible and there 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, using style sheets will decrease the size of the content. 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 UA 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 of granting designers their requests. * Alternate 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 a certain element's 'color''color' property. * Accessibility. Last, but not least, using CSS will increase accessibility to Web documents. By retaining textual information in text form, both robots indexing Web pages and human users will have more options for digesting the content. Users can provide their personal style sheets if author-suggested style sheets hinders accessibility. The cascading mechanism negotiates between, and combines, different style sheets. 3 Conformance: Requirements and Recommendations Contents 1. Definitions 2. Conformance 3. Error conditions 3.1 Definitions In this section, we begin the formal specification of CSS2, starting with the contract between authors, documents, users, and user agents. 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 [RFC2119]. However, for readability, these words do not appear in all upper case letters in this specification. At times, the authors of this specification recommend 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 level N-1 style sheets are valid level N style sheets. In particular, all valid CSS1 style sheets are valid CSS2 style sheets. A valid CSS2 style sheet must respect the grammar of CSS2 and the selector syntax. Furthermore, it must only contain at-rules, property names, and property values defined in this specification. Source document The document to which one or more style sheets refer. Document language The computer language of the source document (e.g., HTML, XML, etc.). The primary syntactic constructs of the document language are called elements, (an SGML term, see [ISO8879]). Most CSS style sheet rules refer to these elements and specify rendering information for them. Examples of elements in HTML include "P" (for structuring paragraphs), "TABLE" (for creating tables), "OL" (for creating ordered lists), etc. The content of an element is the content of that element in the source document; not all elements have content. The rendered content of an element is the content actually rendered. An element's content is generally its rendered content. The rendered content of a replaced element comes from outside the source document. Rendered content may also be alternate text for an element (e.g., the value of the HTML "alt" attribute). Document tree User agents transform a document written in the document language into a document tree where every element except one has exactly one parent element. (See the SGML ([ISO8879]) and XML ([XML]) specifications for the definition of parent.) The one exception is the root element, which has no parent. An element A is called an ancestor of an element B, if either (1) A is the parent B, or (2) A is the parent of some element C that is an ancestor of B. An element A is called a descendant of an element B, if and only if B is an ancestor of A. An element A is called a child of an element B, if and only if B is the parent of A. 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. 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. An element A is called a following element of an element B, if and only if (1) A is an descendant of B or (2) A is a following sibling of B. For example, the following HTML document: 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
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. Author An author is a person or program that writes or generates 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 sheets. User agent 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. 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 user agents claiming conformance to this specification: 1. It must identify the CSS2 media types it supports. 2. For each source document, it must retrieve all associated style sheets that are appropriate for the supported media types. If a user agent cannot retrieve a specified style sheet, it should make a best effort to display the document. 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 legal values and must skip other values. User agents must skip 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. Not every user agent must observe every point, however: * A user agent that inputs style sheets must respect points 1 - 3. * A user agent that outputs style sheets is only required to output valid style sheets * A user agent that renders a document with associated style sheets must respect points 1 - 4 and render the document according to the media-specific requirements set forth in this specification. 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 also recommends that a user agent offer the following functionality to the user (these do not refer to any specific user interface): * Allow the user to specify user style sheets * Allow the user to turn on or off specific style sheets . * Approximate style sheet values even if it can't implement them in strict accordance with this specification. 3.3 Error conditions In general, this document does not specify error handling behavior for user agents. 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. 4 CSS2 syntax and basic data types Contents 1. Syntax 1. Tokenization 2. Characters and case 3. Statements 4. At-rules 5. Blocks 6. Rule sets, declaration blocks, and selectors 7. Declarations and properties 8. Comments 2. Rules for handling parsing errors 3. Values 1. Integers and real numbers 2. Lengths 3. Percentages 4. URIs 5. Colors 6. Angles 7. Times 8. Frequencies 9. Strings 4. CSS embedded in HTML 5. CSS as a stand-alone file 6. Character escapes in CSS 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 B. 4.1.1 Tokenization All levels of CSS, level 1, level 2, but also any future levels, use the same core syntax. This allows UAs to parse (though not, of course, 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 downlevel UA, while also exercising the possibilities of the latest levels of CSS. 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 [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 ~= DELIM any other character The macros in curly braces ({}) above are defined as follows: Macro Definition ---------------------------------------------------------- ident {nmstart}{nmchar}* nmstart [a-zA-Z]|{nonascii}|{escape} nonascii[^\0-\4177777] unicode \\[0-9a-f]{1,6} 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})*\' Below is the core syntax for CSS. The sections that follow describe how to use it. Appendix B 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 | '(' any* ')' | '[' any* ']' ] S*; COMMENT tokens do not occur in the grammar (to keep it readable), but any number of these tokens may appear anywhere. In some cases, user agents must "skip" part of an illegal style sheet. This specification defines skip to mean that the user agent parses the illegal string (from beginning to end), but then skips the string. An identifier consists of letters, digits, hyphens, non-ASCII, and escaped characters. 4.1.2 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 value 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, selectors (element names, classes and IDs) can contain only the characters [A-Za-z0-9] and [ISO10646] characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any [ISO10646] character as a numeric code (see next item). Note that [UNICODE] is code-by-code equivalent to [ISO10646]. * The backslash (\) followed by at most six hexadecimal digits (0..9A..F) stands for the [ISO10646] character with that number. * Any character except a hexadecimal digit can be escaped to remove its special meaning, by putting a backslash (\) in front, For example, "\"" is a string consisting of one double quote. * The two preceding items define backslash-escapes. 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.3 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 "immediate after" mean with no intervening white space or comments. 4.1.4 At-rules At-rules start with an at-keyword, which is an identifier beginning with '@' (for example, '@import', '@page', etc.). An at-rule consists of everything up to and including the next semicolon (;) or the next block, whichever comes first. A CSS UA that encounters an unrecognized at-rule must skip the whole of the @-rule and continue parsing after it. CSS2 user agents have some additional constraints, e.g., they must also skip 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 skips 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.5 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 legal CSS2, but it is still a block as defined above. 4.1.6 Rule sets, declaration blocks, and selectors A rule set 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 one 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 UA can't parse the selector (i.e., it is not valid CSS2), it should skip the {}-block as well. Note. 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 skipped 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 legal token in a CSS2 selector, a CSS2 UA must skip 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 legal CSS2 statement. P[example="public class foo { private int x; foo(int x) { this.x = x; } }"] { color: red } 4.1.7 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. 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. Parentheses, brackets, and braces may be nested. Inside the quotes, characters are parsed as a string. Values are specified separately for each property, but in any case are built from identifiers, strings, numbers, lengths, percentages, URIs, colors, angles, times, and frequencies. To ensure that new properties and new values for existing properties can be added in the future, a UA must skip 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 skip 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.8 Comments Comments begin with the characters "/*" and end with the characters "*/". They may occur anywhere where whitespace can occur 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-HTML3.2 user agents. See [HTML40] for more information. 4.2 Rules for handling parsing errors User agents are required to obey the following rules when it encounters these parsing errors: * Unknown properties. User agents must skip a declaration with an unknown property. For example, if the style sheet is: H1 { color: red; rotation: 70minutes } the UA will treat this as if the style sheet had been H1 { color: red } * Illegal values. User agents must treat illegal values, or values with illegal parts, as if the entire declaration weren't there at all: IMG { float: left } /* 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 */ In the above example, a CSS2 parser would honor the first rule and skip the rest, as if the style sheet had been: IMG { float: left } IMG { } IMG { } IMG { } A UA conforming to a future CSS specification may accept one or more of the other rules as well. * User agents must skip an invalid at-keyword together with everything following it, up to and including the next semicolon (;) or brace pair ({...}), whichever comes first. For example, assume the style sheet reads: @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 skipped. A CSS2 UA skips 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 of 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 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 number '0', the unit identifier is optional. Some properties allow negative length units, 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, ex, and px. H1 { margin: 0.5em } /* em: the height of the element's font */ H1 { margin: 1ex } /* ex: the height of the letter 'x' */ P { font-size: 12px } /* px: pixels, relative to viewing device */ The 'em' unit, as used in CSS, is equal to the font size used when rendering an element's text. It may be used for vertical or horizontal measurement. The 'ex' unit is equal to the font's x-height (the height of the letter 'x') of the element's font. A font need not contain the letter "M" to have an 'em' size or the letter "x" to have an x-height; the font should still define the two units. Both 'em' and 'ex' refer to the font size of an element except when used in the 'font-size' property, where they are relative to the font size inherited from the parent element. 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 or BODY in HTML), 'em' and 'ex' refer to the property's initial value. Please consult the section on line height calculations for more information about line heights in the visual flow model. 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 UA should rescale pixel values. The suggested reference pixel is 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 about 0.0227 degrees. Child elements do not inherit the relative values specified for their parent; they inherit the computed 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. Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are: in (inches), cm (centimeters), mm (millimeters), pt (points), and pc (picas). For example: H1 { margin: 0.5in } /* inches, 1in = 2.54cm */ H2 { line-height: 3cm } /* centimeters */ H3 { word-spacing: 4mm } /* millimeters */ H4 { font-size: 12pt } /* points, 1pt = 1/72 in */ H4 { font-size: 1pc } /* picas, 1pc = 12pt */ In cases where the specified length cannot be supported, UAs should try to approximate. For all CSS2 properties, further computations and inheritance should 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 to which value the percentage refers. When a percentage value is set for a property of the root of the document tree and the percentage is defined as referring to the inherited value of some property X, the resultant value is the percentage times the initial value of property X. Since child elements inherit the computed values of their parent, in the following example, the children of the P element will inherit a value of 12pt for 'line-height' (i.e., 12pt), not the percentage value (120%): P { font-size: 10pt } P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */ 4.3.4 URIs This specification uses the term Uniform Resource Identifier (URI) as defined in [URI] (see also [RFC1630]). Note that URIs include URLs (as defined in [RFC1738] and [RFC1808]). Relative URIs are resolved to full URIs using a base URI. [RFC1808], section 3, defines the normative algorithm for this process. URI values in this specification are denoted by . For historical reasons, the functional notation used to designate URI 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 that are not part of the URI itself must be balanced. Parentheses, commas, whitespace characters, single quotes (') and double quotes (") appearing in a URI must be escaped with a backslash: '\(', '\)', '\,'. In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may specify the location of background images with partial URIs. Partial URIs (as defined in [RFC1808]) are interpreted relative to the base URI of the style sheet, not relative to the base URI 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 Colors A is either a keyword or a numerical RGB specification. The suggested 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 taken from the Windows VGA palette, and their RGB values are not defined in this specification. 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 pairs of 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 in the range of 0-255, or three percentage values, typically in the range of 0.0% to 100.0%) followed by ')'. Whitespace characters are allowed around the numerical values. Values outside the device gamut should be clipped. For a device whose gamut is sRGB, the three rules below are equivalent: EM { color: rgb(255,0,0) } /* integer range 0 - 255 */ EM { color: rgb(300,0,0) } /* clipped to 255 */ EM { color: rgb(110%, 0%, 0%) } /* clipped to 100% */ All RGB colors are specified in the sRGB color space (see [SRGB]). UAs 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 UAs 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. UAs 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.6 Angles Angle values (denoted by in the text) are used with aural cascading 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. After a '0' number, the unit identifier is optional. These following are legal angle unit identifiers: * deg: degrees. * grad: gradient * rad: radians Angle values may be negative. They should be normalized to the range 0-360deg by the UA. For example, -10deg and 350deg are equivalent. The angle value must be followed immediately by the angle unit. 4.3.7 Times Time values (denoted by