bg image(images/recbg.jpg)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

                                                       W3C REC-CSS2-20080411

                      Cascading Style Sheets, level 2
                             CSS2 Specification

           W3C Recommendation 12-May-1998 (revised 11 April 2008)

This version:
    http://www.w3.org/TR/2008/REC-CSS2-20080411
Latest version:
    http://www.w3.org/TR/CSS2
Previous version:
    http://www.w3.org/TR/1998/REC-CSS2-19980512
Editors:
    Bert Bos <bbos@w3.org>
    Håkon Wium Lie <howcome@w3.org>
    Chris Lilley <chris@w3.org>
    Ian Jacobs <ij@w3.org>

Note: This paragraph is informative. This document is currently not
maintained. The CSS Working Group is developing CSS Level 2 Revision 1,
which corrects many errors and omissions in this document as well as making
a few other changes as documented in the changes section. The CSS Working
Group encourages authors and implementors to reference CSS 2.1 (or its 
successor) instead of this document and when features common to CSS2 and
CSS 2.1 are defined differently to follow the definitions in CSS 2.1.

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, with very few exceptions, 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 has been reviewed by W3C Members and other interested parties
and has been endorsed by the Director as a W3C Recommendation. It is a
stable document and may be used as reference material or cited as a
normative reference from another document. W3C's role in making the
Recommendation is to draw attention to the specification and to promote its
widespread deployment. This enhances the functionality and interoperability
of the Web.

A list of current W3C Recommendations and other technical documents can be
found at http://www.w3.org/TR.

Public discussion of CSS features takes place on www-style@w3.org.

Available formats

The CSS2 specification is available in the following formats:

HTML:
    http://www.w3.org/TR/2008/REC-CSS2-20080411
a plain text file:
    http://www.w3.org/TR/2008/REC-CSS2-20080411/css2.txt,
HTML as a gzip'ed tar file:
    http://www.w3.org/TR/2008/REC-CSS2-20080411/css2.tgz,
HTML as a zip file (this is a '.zip' file not an '.exe'):
    http://www.w3.org/TR/2008/REC-CSS2-20080411/css2.zip,
as well as a gzip'ed PostScript file:
    http://www.w3.org/TR/2008/REC-CSS2-20080411/css2.ps.gz,
and a PDF file:
    http://www.w3.org/TR/2008/REC-CSS2-20080411/css2.pdf.

In case of a discrepancy between the various forms of the specification,
http://www.w3.org/TR/2008/REC-CSS2-20080411 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/Style/
css2-updates/translations.html.

Errata

The list of known errors in this specification is available at http://
www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html. Please report
errors in this document to css2-editors@w3.org.

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 formatting model
  • 10 Visual formatting model details
  • 11 Visual effects
  • 12 Generated content, automatic numbering, and lists
  • 13 Paged media
  • 14 Colors and Backgrounds
  • 15 Fonts
  • 16 Text
  • 17 Tables
  • 18 User interface
  • 19 Aural style sheets
  • Appendix A. A sample style sheet for HTML 4.0
  • Appendix B. Changes from CSS1
  • Appendix C. Implementation and performance notes for fonts
  • 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
          ☆ 1.3.1 Document language elements and attributes
          ☆ 1.3.2 CSS property definitions
              ○ Value
              ○ Initial
              ○ Applies to
              ○ Inherited
              ○ Percentage values
              ○ Media groups
          ☆ 1.3.3 Shorthand properties
          ☆ 1.3.4 Notes and examples
          ☆ 1.3.5 Images and long descriptions
      □ 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
          ☆ 2.3.1 The canvas
          ☆ 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
          ☆ 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
  • 5 Selectors
      □ 5.1 Pattern matching
      □ 5.2 Selector syntax
          ☆ 5.2.1 Grouping
      □ 5.3 Universal selector
      □ 5.4 Type selectors
      □ 5.5 Descendant selectors
      □ 5.6 Child selectors
      □ 5.7 Adjacent sibling selectors
      □ 5.8 Attribute selectors
          ☆ 5.8.1 Matching attributes and attribute values
          ☆ 5.8.2 Default attribute values in DTDs
          ☆ 5.8.3 Class selectors
      □ 5.9 ID selectors
      □ 5.10 Pseudo-elements and pseudo-classes
      □ 5.11 Pseudo-classes
          ☆ 5.11.1 :first-child pseudo-class
          ☆ 5.11.2 The link pseudo-classes: :link and :visited
          ☆ 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
          ☆ 5.11.4 The language pseudo-class: :lang
      □ 5.12 Pseudo-elements
          ☆ 5.12.1 The :first-line pseudo-element
          ☆ 5.12.2 The :first-letter pseudo-element
          ☆ 5.12.3 The :before and :after pseudo-elements
  • 6 Assigning property values, Cascading, and Inheritance
      □ 6.1 Specified, computed, and actual values
          ☆ 6.1.1 Specified values
          ☆ 6.1.2 Computed values
          ☆ 6.1.3 Actual values
      □ 6.2 Inheritance
          ☆ 6.2.1 The 'inherit' value
      □ 6.3 The @import rule
      □ 6.4 The cascade
          ☆ 6.4.1 Cascading order
          ☆ 6.4.2 !important rules
          ☆ 6.4.3 Calculating a selector's specificity
          ☆ 6.4.4 Precedence of non-CSS presentational hints
  • 7 Media types
      □ 7.1 Introduction to media types
      □ 7.2 Specifying media-dependent style sheets
          ☆ 7.2.1 The @media rule
      □ 7.3 Recognized media types
          ☆ 7.3.1 Media groups
  • 8 Box model
      □ 8.1 Box dimensions
      □ 8.2 Example of margins, padding, and borders
      □ 8.3 Margin properties: 'margin-top', 'margin-right',
        'margin-bottom', 'margin-left', and 'margin'
          ☆ 8.3.1 Collapsing margins
      □ 8.4 Padding properties: 'padding-top', 'padding-right',
        'padding-bottom', 'padding-left', and 'padding'
      □ 8.5 Border properties
          ☆ 8.5.1 Border width: 'border-top-width', 'border-right-width',
            'border-bottom-width', 'border-left-width', and 'border-width'
          ☆ 8.5.2 Border color: 'border-top-color', 'border-right-color',
            'border-bottom-color', 'border-left-color', and 'border-color'
          ☆ 8.5.3 Border style: 'border-top-style', 'border-right-style',
            'border-bottom-style', 'border-left-style', and 'border-style'
          ☆ 8.5.4 Border shorthand properties: 'border-top',
            'border-bottom', 'border-right', 'border-left', and 'border'
  • 9 Visual formatting model
      □ 9.1 Introduction to the visual formatting model
          ☆ 9.1.1 The viewport
          ☆ 9.1.2 Containing blocks
      □ 9.2 Controlling box generation
          ☆ 9.2.1 Block-level elements and block boxes
              ○ Anonymous block boxes
          ☆ 9.2.2 Inline-level elements and inline boxes
              ○ Anonymous inline boxes
          ☆ 9.2.3 Compact boxes
          ☆ 9.2.4 Run-in boxes
          ☆ 9.2.5 The 'display' property
      □ 9.3 Positioning schemes
          ☆ 9.3.1 Choosing a positioning scheme: 'position' property
          ☆ 9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'
      □ 9.4 Normal flow
          ☆ 9.4.1 Block formatting context
          ☆ 9.4.2 Inline formatting context
          ☆ 9.4.3 Relative positioning
      □ 9.5 Floats
          ☆ 9.5.1 Positioning the float: the 'float' property
          ☆ 9.5.2 Controlling flow next to floats: the 'clear' property
      □ 9.6 Absolute positioning
          ☆ 9.6.1 Fixed positioning
      □ 9.7 Relationships between 'display', 'position', and 'float'
      □ 9.8 Comparison of normal flow, floats, and absolute positioning
          ☆ 9.8.1 Normal flow
          ☆ 9.8.2 Relative positioning
          ☆ 9.8.3 Floating a box
          ☆ 9.8.4 Absolute positioning
      □ 9.9 Layered presentation
          ☆ 9.9.1 Specifying the stack level: the 'z-index' property
      □ 9.10 Text direction: the 'direction' and 'unicode-bidi' properties
  • 10 Visual formatting model details
      □ 10.1 Definition of "containing block"
      □ 10.2 Content width: the 'width' property
      □ 10.3 Computing widths and margins
          ☆ 10.3.1 Inline, non-replaced elements
          ☆ 10.3.2 Inline, replaced elements
          ☆ 10.3.3 Block-level, non-replaced elements in normal flow
          ☆ 10.3.4 Block-level, replaced elements in normal flow
          ☆ 10.3.5 Floating, non-replaced elements
          ☆ 10.3.6 Floating, replaced elements
          ☆ 10.3.7 Absolutely positioned, non-replaced elements
          ☆ 10.3.8 Absolutely positioned, replaced elements
      □ 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
      □ 10.5 Content height: the 'height' property
      □ 10.6 Computing heights and margins
          ☆ 10.6.1 Inline, non-replaced elements
          ☆ 10.6.2 Inline, replaced elements block-level, replaced elements
            in normal flow, and floating, replaced elements
          ☆ 10.6.3 Block-level, non-replaced elements in normal flow, and
            floating, non-replaced elements
          ☆ 10.6.4 Absolutely positioned, non-replaced elements
          ☆ 10.6.5 Absolutely positioned, replaced elements
      □ 10.7 Minimum and maximum heights: 'min-height' and 'max-height'
      □ 10.8 Line height calculations: the 'line-height' and
        'vertical-align' properties
          ☆ 10.8.1 Leading and half-leading
  • 11 Visual effects
      □ 11.1 Overflow and clipping
          ☆ 11.1.1 Overflow: the 'overflow' property
          ☆ 11.1.2 Clipping: the 'clip' property
      □ 11.2 Visibility: the 'visibility' property
  • 12 Generated content, automatic numbering, and lists
      □ 12.1 The :before and :after pseudo-elements
      □ 12.2 The 'content' property
      □ 12.3 Interaction of :before and :after with 'compact' and 'run-in'
        elements
      □ 12.4 Quotation marks
          ☆ 12.4.1 Specifying quotes with the 'quotes' property
          ☆ 12.4.2 Inserting quotes with the 'content' property
      □ 12.5 Automatic counters and numbering
          ☆ 12.5.1 Nested counters and scope
          ☆ 12.5.2 Counter styles
          ☆ 12.5.3 Counters in elements with 'display: none'
      □ 12.6 Markers and lists
          ☆ 12.6.1 Markers: the 'marker-offset' property
          ☆ 12.6.2 Lists: the 'list-style-type', 'list-style-image',
            'list-style-position', and 'list-style' properties
  • 13 Paged media
      □ 13.1 Introduction to paged media
      □ 13.2 Page boxes: the @page rule
          ☆ 13.2.1 Page margins
          ☆ 13.2.2 Page size: the 'size' property
              ○ Rendering page boxes that do not fit a target sheet
              ○ Positioning the page box on the sheet
          ☆ 13.2.3 Crop marks: the 'marks' property
          ☆ 13.2.4 Left, right, and first pages
          ☆ 13.2.5 Content outside the page box
      □ 13.3 Page breaks
          ☆ 13.3.1 Break before/after elements: 'page-break-before',
            'page-break-after', 'page-break-inside'
          ☆ 13.3.2 Using named pages: 'page'
          ☆ 13.3.3 Breaks inside elements: 'orphans', 'widows'
          ☆ 13.3.4 Allowed page breaks
          ☆ 13.3.5 Forced page breaks
          ☆ 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
          ☆ 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
          ☆ 15.2.1 Font specification properties
          ☆ 15.2.2 Font family: the 'font-family' property
          ☆ 15.2.3 Font styling: the 'font-style', 'font-variant',
            'font-weight' and 'font-stretch' properties
          ☆ 15.2.4 Font size: the 'font-size' and 'font-size-adjust'
            properties
          ☆ 15.2.5 Shorthand font property: the 'font' property
          ☆ 15.2.6 Generic font families
              ○ serif
              ○ sans-serif
              ○ cursive
              ○ fantasy
              ○ monospace
      □ 15.3 Font selection
          ☆ 15.3.1 Font Descriptions and @font-face
          ☆ 15.3.2 Descriptors for Selecting a Font: 'font-family',
            'font-style', 'font-variant', 'font-weight', 'font-stretch' and
            'font-size'
          ☆ 15.3.3 Descriptors for Font Data Qualification: 'unicode-range'
          ☆ 15.3.4 Descriptor for Numeric Values: 'units-per-em'
          ☆ 15.3.5 Descriptor for Referencing: 'src'
          ☆ 15.3.6 Descriptors for Matching: 'panose-1', 'stemv', 'stemh',
            'slope', 'cap-height', 'x-height', 'ascent', and 'descent'
          ☆ 15.3.7 Descriptors for Synthesis: 'widths', 'bbox' and
            'definition-src'
          ☆ 15.3.8 Descriptors for Alignment: 'baseline', 'centerline',
            'mathline', and 'topline'
          ☆ 15.3.9 Examples
      □ 15.4 Font Characteristics
          ☆ 15.4.1 Introducing Font Characteristics
          ☆ 15.4.2 Full font name
          ☆ 15.4.3 Coordinate units on the em square
          ☆ 15.4.4 Central Baseline
          ☆ 15.4.5 Font Encoding
          ☆ 15.4.6 Font family name
          ☆ 15.4.7 Glyph widths
          ☆ 15.4.8 Horizontal stem width
          ☆ 15.4.9 Height of uppercase glyphs
          ☆ 15.4.10 Height of lowercase glyphs
          ☆ 15.4.11 Lower Baseline
          ☆ 15.4.12 Mathematical Baseline
          ☆ 15.4.13 Maximal bounding box
          ☆ 15.4.14 Maximum unaccented height
          ☆ 15.4.15 Maximum unaccented depth
          ☆ 15.4.16 Panose-1 number
          ☆ 15.4.17 Range of ISO 10646 characters
          ☆ 15.4.18 Top Baseline
          ☆ 15.4.19 Vertical stem width
          ☆ 15.4.20 Vertical stroke angle
      □ 15.5 Font matching algorithm
          ☆ 15.5.1 Mapping font weight values to font names
          ☆ 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
          ☆ 16.3.1 Underlining, overlining, striking, and blinking: the
            'text-decoration' property
          ☆ 16.3.2 Text shadows: the 'text-shadow' property
      □ 16.4 Letter and word spacing: the 'letter-spacing' and
        'word-spacing' properties
      □ 16.5 Capitalization: the 'text-transform' property
      □ 16.6 Whitespace: the 'white-space' property
  • 17 Tables
      □ 17.1 Introduction to tables
      □ 17.2 The CSS table model
          ☆ 17.2.1 Anonymous table objects
      □ 17.3 Column selectors
      □ 17.4 Tables in the visual formatting model
          ☆ 17.4.1 Caption position and alignment
      □ 17.5 Visual layout of table contents
          ☆ 17.5.1 Table layers and transparency
          ☆ 17.5.2 Table width algorithms: the 'table-layout' property
              ○ Fixed table layout
              ○ Automatic table layout
          ☆ 17.5.3 Table height algorithms
          ☆ 17.5.4 Horizontal alignment in a column
          ☆ 17.5.5 Dynamic row and column effects
      □ 17.6 Borders
          ☆ 17.6.1 The separated borders model
              ○ Borders around empty cells: the 'empty-cells' property
          ☆ 17.6.2 The collapsing border model
              ○ Border conflict resolution
          ☆ 17.6.3 Border styles
      □ 17.7 Audio rendering of tables
          ☆ 17.7.1 Speaking headers: the 'speak-header' property
  • 18 User interface
      □ 18.1 Cursors: the 'cursor' property
      □ 18.2 User preferences for colors
      □ 18.3 User preferences for fonts
      □ 18.4 Dynamic outlines: the 'outline' property
          ☆ 18.4.1 Outlines and the focus
      □ 18.5 Magnification
  • 19 Aural style sheets
      □ 19.1 Introduction to aural style sheets
      □ 19.2 Volume properties: 'volume'
      □ 19.3 Speaking properties: 'speak'
      □ 19.4 Pause properties: 'pause-before', 'pause-after', and 'pause'
      □ 19.5 Cue properties: 'cue-before', 'cue-after', and 'cue'
      □ 19.6 Mixing properties: 'play-during'
      □ 19.7 Spatial properties: 'azimuth' and 'elevation'
      □ 19.8 Voice characteristic properties: 'speech-rate', 'voice-family',
        'pitch', 'pitch-range', 'stress', and 'richness'
      □ 19.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 for fonts
      □ C.1 Glossary of font terms
      □ C.2 Font retrieval
      □ C.3 Meaning of the Panose Digits
      □ C.4 Deducing Unicode Ranges for TrueType
      □ C.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  ©  1998–2008 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
          ☆ Value
          ☆ Initial
          ☆ Applies to
          ☆ Inherited
          ☆ Percentage values
          ☆ Media groups
      □ 1.3.3 Shorthand properties
      □ 1.3.4 Notes and examples
      □ 1.3.5 Images and long descriptions
  • 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, 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., <length>,
    <percentage>, 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
    <border-width>. Notice the distinction between <border-width> 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: [ <length> | thick | thin ]{1,4}
    Value: [<family-name> , ]* <family-name>
    Value: <uri>? <color> [ / <color> ]?
    Value: <uri> || <color>

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 properties, meaning they 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).

Example(s):

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' take their initial values.

1.3.4 Notes and examples

All examples that illustrate illegal usage are clearly marked as "ILLEGAL
EXAMPLE".

All HTML examples conform to the HTML 4.0 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.3.5 Images and long descriptions

Most images in the electronic version of this specification are accompanied
by "long descriptions" of what they represent. A link to the long
description is denoted by a "[D]" to the right of the image.

Images and long descriptions are informative only.

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), Tim 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: Alan Borning, Robert Cailliau, Liz
Castro, James Clark, Dan Connolly, Donna Converse, Daniel Dardailler, Al
Gilman, Daniel Greene, Scott Isaacs, Geir Ivarsøy, Vincent Mallet, Kim
Marriott, Brian Michalowski, Lou Montulli, Henrik Frystyk Nielsen, Jacob
Nielsen, Eva von Pepel, William Perry, David Siegel, Peter Stuckey, 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, Sue Jordan, Ian Hickson, Susan Lesch, Andrew Marshall,
MegaZone, Eric Meyer, Russell O'Connor, David Perrell, Liam Quinn, Jon
Seymour, Neil St. Laurent, Taylor, Brian Wilson, and Chris Wilson for their
participation.

Many thanks to the Web Accessibility Initiative Protocols and Formats
Technical Review Working Group (WAI PF) for helping to improve the
accessibility of CSS2.

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

The LINK element specifies:

  • the type of link: to a "stylesheet".
  • the location of the style sheet via the "ref" 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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

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, including 'color'. Let's look
at some of the others:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY {
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em;
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

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:

<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

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:

<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

A visual user agent could format the above example as:

Example rendering   [D]

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 }

A visual user agent could format the above example as:

Example rendering   [D]

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.
 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 formatting 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 formatting structure.
    Often, the formatting 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 formatting structure
    need not be "tree-shaped" at all -- the nature of the structure depends
    on the implementation. Second, the formatting 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 formatting structure. A list
    element, on the other hand, may generate more information in the
    formatting 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 formatting 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 formatting
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
parts of a document or user agent:

  • 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 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. Several CSS features will make the Web more accessible to
    users with disabilities:

      □ Properties to control font appearance allow authors to eliminate
        inaccessible bit-mapped text images.
      □ Positioning properties allow authors to eliminate mark-up tricks
        (e.g., invisible images) to force layout.
      □ The semantics of !important rules mean that users with particular
        presentation requirements can override the author's style sheets.
      □ The new 'inherit' value for all properties improves cascading
        generality and allows for easier and more consistent style tuning.
      □ Improved media support, including media groups and the braille,
        embossed, and tty media types, will allow users and authors to
        tailor pages to those devices.
      □ Aural properties give control over voice and audio output.
      □ The attribute selectors, 'attr()' function, and 'content' property
        give access to alternate content.
      □ Counters and section/paragraph numbering can improve document
        navigability and save on indenting spacing (important for braille
        devices). The 'word-spacing' and 'text-indent' properties also
        eliminate the need for extra whitespace in the document.

    Note. For more information about designing accessible documents using
    CSS and HTML, please consult [WAI-PAGEAUTH].

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

              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 (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.
Replaced element
    An element for which the CSS formatter knows only the intrinsic
    dimensions. In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements
    can be examples of replaced elements. For example, the content of the
    IMG element is often replaced by the image that the "src" attribute
    designates. CSS does not define how the intrinsic dimensions are found.
Intrinsic dimensions
    The width and height as defined by the element itself, not imposed by
    the surroundings. In CSS2 it is assumed that all replaced elements --
    and only replaced elements -- come with intrinsic dimensions.
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 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), 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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <TITLE>My home page</TITLE>
  <BODY>
    <H1>My home page</H1>
    <P>Welcome to my home page! Let me tell you about my favorite
                composers:
    <UL>
      <LI> Elvis Costello
      <LI> Johannes Brahms
      <LI> Georges Brassens
    </UL>
  </BODY>
</HTML>

This results in the following tree:

Sample document tree   [D]

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 </P> and </LI> 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. For each element in a document tree, it must assign a value for every
    applicable property according to the property's definition and 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. The "text/css" content type has been registered by RFC 2138 (
[RFC2318]).
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

                     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 (and forward-compatible parsing rules)
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           <!--
CDC           -->
;             ;
{             \{
}             \}
(             \(
)             \)
[             \[
]             \]
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}*
name     {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 !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2  \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl       \n|\r\n|\r|\f
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:

Illegal example(s):

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
    escapes.

    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 whitespace or comments.

4.1.5 At-rules

At-rules start with an at-keyword, an '@' character followed immediately 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 at-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.

Illegal example(s):

Assume, for example, that 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 }

Illegal example(s):

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.

Illegal example(s):

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.

Illegal example(s):

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 }

Example(s):

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.

Example(s):

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.

Illegal example(s):

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 ("<!--" and "-->") 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 the following scenarios:

  • 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 <integer>) or real
number values (denoted by <number>). Real numbers and integers are specified
in decimal notation only. An <integer> consists of one or more digits "0" to
"9". A <number> can either be an <integer>, 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 <length> in this specification) is
an optional sign character ('+' or '-', with '+' being the default)
immediately followed by a <number> (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

Example(s):

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 defined even for fonts that don't contain an "x".

Example(s):

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 inches), 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 becomelarger if the viewing distance increases   
[D]

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 thanon a low-res one   [D]

Child elements do not inherit the relative values specified for their
parent; they (generally) inherit the computed values.

Example(s):

In the following rules, the computed 'text-indent' value of H1 elements will
be 36pt, not 45pt, if H1 is a child of the BODY element.

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* i.e., 36pt */
}
H1 { font-size: 15pt }

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.

Example(s):

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 in the actual value.

4.3.3 Percentages

The format of a percentage value (denoted by <percentage> 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
formatting 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.

Example(s):

Since child elements (generally) 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', not the percentage value (120%):

P { font-size: 10pt }
P { line-height: 120% }  /* 120% of 'font-size' */

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.

URI values in this specification are denoted by <uri>. The functional
notation used to designate URIs in property values is "url()", as in:

Example(s):

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 ')'. The two quote
characters must be the same.

Example(s):

An example without quotes:

LI { list-style: url(http://www.redballs.com/redball.png) disc }

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.

Example(s):

For example, suppose the following rule:

BODY { background: url("yellow") }

is located in a style sheet designated by the URI:

http://www.myorg.org/style/basic.css

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(<identifier>)' or 'counter(<identifier>,
<list-style-type>)' is used. The default style is 'decimal'.

To refer to a sequence of nested counters of the same name, the notation is
'counters(<identifier>, <string>)' or 'counters(<identifier>, <string>,
<list-style-type>)'. 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 <list-style-type>: 'counter(x,
none)' yields an empty string.

Example(s):

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 <color> 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]). 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.

Example(s):

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:

Example(s):

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% */

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
ensures 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.

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.

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 typical CRT monitor, whose device gamut is the same as sRGB, the three
rules below are equivalent:

Example(s):

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%) */

Other devices, such as printers, have different gamuts to sRGB; some colors
outside the 0..255 sRGB range will be representable (inside the device
gamut), while other colors inside the 0..255 sRGB range will be outside the
device gamut and will thus be clipped.

Note. Although colors can add significant amounts of information to document
and make them more readable, please consider that certain color combinations
may cause problems for users with color blindness. If you use a background
image or set the background color, please adjust foreground colors
accordingly.

4.3.7 Angles

Angle values (denoted by <angle> 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 <number> immediately followed by an angle
unit identifier.

Angle unit identifiers are:

  • 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 <time> in the text) are used with aural style sheets
.

Their format is a <number> immediately followed by a time unit identifier.

Time unit identifiers are:

  • ms: milliseconds
  • s: seconds

Time values may not be negative.

4.3.9 Frequencies

Frequency values (denoted by <frequency> in the text) are used with aural
cascading style sheets.

Their format is a <number> immediately followed by a frequency unit
identifier.

Frequency unit identifiers are:

  • Hz: Hertz
  • kHz: kilo Hertz

Frequency values may not be negative.

For example, 200Hz (or 200hz) is a bass sound, and 6kHz (or 6khz) is a
treble sound.

4.3.10 Strings

Strings can either be written with double quotes or with single quotes.
Double quotes cannot occur inside double quotes, unless escaped (as '\"' or
as '\22'). Analogously for single quotes ("\'" or "\27").

Example(s):

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

A string cannot directly contain a newline. To include a newline in a
string, use the escape "\A" (hexadecimal A is the line feed character in
Unicode, but represents the generic notion of "newline" in CSS). See the
'content' property for an example.

It is possible to break strings over several lines, for aesthetic or other
reasons, but in such a case the newline itself has to be escaped with a
backslash (\). For instance, the following two selectors are exactly the
same:

Example(s):

A[TITLE="a not s\
o very long title"] {/*...*/}
A[TITLE="a not so very long title"] {/*...*/}

4.4 CSS document representation

A CSS style sheet is a sequence of characters from the Universal Character
Set (see [ISO10646]). For transmission and storage, these characters must be
encoded by a character encoding that supports the set of characters
available in US-ASCII (e.g., ISO 8859-x, SHIFT JIS, etc.). For a good
introduction to character sets and character encodings, please consult the
HTML 4.0 specification ([HTML40], chapter 5), See also the XML 1.0
specification ([XML10], sections 2.2 and 4.3.3, and Appendix F.

When a style sheet is embedded in another document, such as in the STYLE
element or "style" attribute of HTML, the style sheet shares the character
encoding of the whole document.

When a style sheet resides in a separate file, user agents must observe the
following priorities when determining a document's character encoding (from
highest priority to lowest):

 1. An HTTP "charset" parameter in a "Content-Type" field.
 2. The @charset at-rule.
 3. Mechanisms of the language of the referencing document (e.g., in HTML,
    the "charset" attribute of the LINK element).

At most one @charset rule may appear in an external style sheet -- it must
not appear in an embedded style sheet -- and it must appear at the very
start of the document, not preceded by any characters. After "@charset",
authors specify the name of a character encoding. The name must be a charset
name as described in the IANA registry (See [IANA]. Also, see [CHARSETS] for
a complete list of charsets). For example:

Example(s):

@charset "ISO-8859-1";

This specification does not mandate which character encodings a user agent
must support.

Note that reliance on the @charset construct theoretically poses a problem
since there is no a priori information on how it is encoded. In practice,
however, the encodings in wide use on the Internet are either based on
ASCII, UTF-16, UCS-4, or (rarely) on EBCDIC. This means that in general, the
initial byte values of a document enable a user agent to detect the encoding
family reliably, which provides enough information to decode the @charset
rule, which in turn determines the exact character encoding.

4.4.1 Referring to characters not represented in a character encoding

A style sheet may have to refer to characters that cannot be represented in
the current character encoding. These characters must be written as escaped
references to ISO 10646 characters. These escapes serve the same purpose as
numeric character references in HTML or XML documents (see [HTML40],
chapters 5 and 25).

The character escape mechanism should be used when only a few characters
must be represented this way. If most of a document requires escaping,
authors should encode it with a more appropriate encoding (e.g., if the
document contains a lot of Greek characters, authors might use "ISO-8859-7"
or "UTF-8").

Intermediate processors using a different character encoding may translate
these escaped sequences into byte sequences of that encoding. Intermediate
processors must not, on the other hand, alter escape sequences that cancel
the special meaning of an ASCII character.

Conforming user agents must correctly map to Unicode all characters in any
character encodings that they recognize (or they must behave as if they
did).

For example, a document transmitted as ISO-8859-1 (Latin-1) cannot contain
Greek letters directly: "κουρος" (Greek: "kouros") has to be written as "\
3BA\3BF\3C5\3C1\3BF\3C2".

Note. In HTML 4.0, numeric character references are interpreted in "style"
attribute values but not in the content of the STYLE element. Because of
this asymmetry, we recommend that authors use the CSS character escape
mechanism rather than numeric character references for both the "style"
attribute and the STYLE element. For example, we recommend:

<SPAN style="voice-family: D\FC rst">...</SPAN>

rather than:

<SPAN style="voice-family: D&#252;rst">...</SPAN>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

                                5 Selectors

Contents

  • 5.1 Pattern matching
  • 5.2 Selector syntax
      □ 5.2.1 Grouping
  • 5.3 Universal selector
  • 5.4 Type selectors
  • 5.5 Descendant selectors
  • 5.6 Child selectors
  • 5.7 Adjacent sibling selectors
  • 5.8 Attribute selectors
      □ 5.8.1 Matching attributes and attribute values
      □ 5.8.2 Default attribute values in DTDs
      □ 5.8.3 Class selectors
  • 5.9 ID selectors
  • 5.10 Pseudo-elements and pseudo-classes
  • 5.11 Pseudo-classes
      □ 5.11.1 :first-child pseudo-class
      □ 5.11.2 The link pseudo-classes: :link and :visited
      □ 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
      □ 5.11.4 The language pseudo-class: :lang
  • 5.12 Pseudo-elements
      □ 5.12.1 The :first-line pseudo-element
      □ 5.12.2 The :first-letter pseudo-element
      □ 5.12.3 The :before and :after pseudo-elements

5.1 Pattern matching

In CSS, pattern matching rules determine which style rules apply to elements
in the document tree. These patterns, called selectors, may range from
simple element names to rich contextual patterns. If all conditions in the
pattern are true for a certain element, the selector matches the element.

The case-sensitivity of document language element names in selectors depends
on the document language. For example, in HTML, element names are
case-insensitive, but in XML they are case-sensitive.

The following table summarizes CSS2 selector syntax:

┌─────────────┬─────────────────────────────────────────────┬──────────────┐
│   Pattern   │                   Meaning                   │ Described in │
│             │                                             │   section    │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│*            │Matches any element.                         │Universal     │
│             │                                             │selector      │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│E            │Matches any E element (i.e., an element of   │Type selectors│
│             │type E).                                     │              │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│E F          │Matches any F element that is a descendant of│Descendant    │
│             │an E element.                                │selectors     │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│E > F        │Matches any F element that is a child of an  │Child         │
│             │element E.                                   │selectors     │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│             │Matches element E when E is the first child  │The           │
│E:first-child│of its parent.                               │:first-child  │
│             │                                             │pseudo-class  │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│             │Matches element E if E is the source anchor  │              │
│E:link       │of a hyperlink of which the target is not yet│The link      │
│E:visited    │visited (:link) or already visited           │pseudo-classes│
│             │(:visited).                                  │              │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│E:active     │                                             │The dynamic   │
│E:hover      │Matches E during certain user actions.       │pseudo-classes│
│E:focus      │                                             │              │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│             │Matches element of type E if it is in (human)│The :lang()   │
│E:lang(c)    │language c (the document language specifies  │pseudo-class  │
│             │how language is determined).                 │              │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│E + F        │Matches any F element immediately preceded by│Adjacent      │
│             │an element E.                                │selectors     │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│E[foo]       │Matches any E element with the "foo"         │Attribute     │
│             │attribute set (whatever the value).          │selectors     │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│E[foo=       │Matches any E element whose "foo" attribute  │Attribute     │
│"warning"]   │value is exactly equal to "warning".         │selectors     │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│E[foo~=      │Matches any E element whose "foo" attribute  │Attribute     │
│"warning"]   │value is a list of space-separated values,   │selectors     │
│             │one of which is exactly equal to "warning".  │              │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│             │Matches any E element whose "lang" attribute │Attribute     │
│E[lang|="en"]│has a hyphen-separated list of values        │selectors     │
│             │beginning (from the left) with "en".         │              │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│DIV.warning  │HTML only. The same as DIV[class~="warning"].│Class         │
│             │                                             │selectors     │
├─────────────┼─────────────────────────────────────────────┼──────────────┤
│E#myid       │Matches any E element ID equal to "myid".    │ID selectors  │
└─────────────┴─────────────────────────────────────────────┴──────────────┘

5.2 Selector syntax

A simple selector is either a type selector or universal selector followed
immediately by zero or more attribute selectors, ID selectors, or
pseudo-classes, in any order. The simple selector matches if all of its
components match.

A selector is a chain of one or more simple selectors separated by
combinators. Combinators are: whitespace, ">", and "+". Whitespace may
appear between a combinator and the simple selectors around it.

The elements of the document tree that match a selector are called subjects
of the selector. A selector consisting of a single simple selector matches
any element satisfying its requirements. Prepending a simple selector and
combinator to a chain imposes additional matching constraints, so the
subjects of a selector are always a subset of the elements matching the
rightmost simple selector.

One pseudo-element may be appended to the last simple selector in a chain,
in which case the style information applies to a subpart of each subject.

5.2.1 Grouping

When several selectors share the same declarations, they may be grouped into
a comma-separated list.

Example(s):

In this example, we condense three rules with identical declarations into
one. Thus,

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

is equivalent to:

H1, H2, H3 { font-family: sans-serif }

CSS offers other "shorthand" mechanisms as well, including multiple
declarations and shorthand properties.

5.3 Universal selector

The universal selector, written "*", matches the name of any element type.
It matches any single element in the document tree.

If the universal selector is not the only component of a simple selector,
the "*" may be omitted. For example:

  • *[LANG=fr] and [LANG=fr] are equivalent.
  • *.warning and .warning are equivalent.
  • *#myid and #myid are equivalent.

5.4 Type selectors

A type selector matches the name of a document language element type. A type
selector matches every instance of the element type in the document tree.

Example(s):

The following rule matches all H1 elements in the document tree:

H1 { font-family: sans-serif }

5.5 Descendant selectors

At times, authors may want selectors to match an element that is the
descendant of another element in the document tree (e.g., "Match those EM
elements that are contained by an H1 element"). Descendant selectors express
such a relationship in a pattern. A descendant selector is made up of two or
more selectors separated by whitespace. A descendant selector of the form "A
B" matches when an element B is an arbitrary descendant of some ancestor
element A.

Example(s):

For example, consider the following rules:

H1 { color: red }
EM { color: red }

Although the intention of these rules is to add emphasis to text by changing
its color, the effect will be lost in a case such as:

<H1>This headline is <EM>very</EM> important</H1>

We address this case by supplementing the previous rules with a rule that
sets the text color to blue whenever an EM occurs anywhere within an H1:

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

The third rule will match the EM in the following fragment:

<H1>This <SPAN class="myclass">headline
is <EM>very</EM> important</SPAN></H1>

Example(s):

The following selector:

DIV * P

matches a P element that is a grandchild or later descendant of a DIV
element. Note the whitespace on either side of the "*".

Example(s):

The selector in the following rule, which combines descendant and attribute
selectors, matches any element that (1) has the "href" attribute set and (2)
is inside a P that is itself inside a DIV:

DIV P *[href]

5.6 Child selectors

A child selector matches when an element is the child of some element. A
child selector is made up of two or more selectors separated by ">".

Example(s):

The following rule sets the style of all P elements that are children of
BODY:

BODY > P { line-height: 1.3 }

Example(s):

The following example combines descendant selectors and child selectors:

DIV OL>LI P

It matches a P element that is a descendant of an LI; the LI element must be
the child of an OL element; the OL element must be a descendant of a DIV.
Notice that the optional whitespace around the ">" combinator has been left
out.

For information on selecting the first child of an element, please see the
section on the :first-child pseudo-class below.

5.7 Adjacent sibling selectors

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is
the subject of the selector. The selector matches if E1 and E2 share the
same parent in the document tree and E1 immediately precedes E2.

In some contexts, adjacent elements generate formatting objects whose
presentation is handled automatically (e.g., collapsing vertical margins
between adjacent boxes). The "+" selector allows authors to specify
additional style to adjacent elements.

Example(s):

Thus, the following rule states that when a P element immediately follows a
MATH element, it should not be indented:

MATH + P { text-indent: 0 }

The next example reduces the vertical space separating an H1 and an H2 that
immediately follows it:

H1 + H2 { margin-top: -5mm }

Example(s):

The following rule is similar to the one in the previous example, except
that it adds an attribute selector. Thus, special formatting only occurs
when H1 has class="opener":

H1.opener + H2 { margin-top: -5mm }

5.8 Attribute selectors

CSS2 allows authors to specify rules that match attributes defined in the
source document.

5.8.1 Matching attributes and attribute values

Attribute selectors may match in four ways:

[att]
    Match when the element sets the "att" attribute, whatever the value of
    the attribute.
[att=val]
    Match when the element's "att" attribute value is exactly "val".
[att~=val]
    Match when the element's "att" attribute value is a space-separated list
    of "words", one of which is exactly "val". If this selector is used, the
    words in the value must not contain spaces (since they are separated by
    spaces).
[att|=val]
    Match when the element's "att" attribute value is a hyphen-separated
    list of "words", beginning with "val". The match always starts at the
    beginning of the attribute value. This is primarily intended to allow 
    language subcode matches (e.g., the "lang" attribute in HTML) as
    described in RFC 1766 ([RFC1766]).

Attribute values must be identifiers or strings. The case-sensitivity of
attribute names and values in selectors depends on the document language.

Example(s):

For example, the following attribute selector matches all H1 elements that
specify the "title" attribute, whatever its value:

H1[title] { color: blue; }

Example(s):

In the following example, the selector matches all SPAN elements whose
"class" attribute has exactly the value "example":

SPAN[class=example] { color: blue; }

Multiple attribute selectors can be used to refer to several attributes of
an element, or even several times the same attribute.

Example(s):

Here, the selector matches all SPAN elements whose "hello" attribute has
exactly the value "Cleveland" and whose "goodbye" attribute has exactly the
value "Columbus":

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Example(s):

The following selectors illustrate the differences between "=" and "~=". The
first selector will match, for example, the value "copyright copyleft
copyeditor" for the "rel" attribute. The second selector will only match
when the "href" attribute has the value "http://www.w3.org/".

A[rel~="copyright"]
A[href="http://www.w3.org/"]

Example(s):

The following rule hides all elements for which the value of the "lang"
attribute is "fr" (i.e., the language is French).

*[LANG=fr] { display : none }

Example(s):

The following rule will match for values of the "lang" attribute that begin
with "en", including "en", "en-US", and "en-cockney":

*[LANG|="en"] { color : red }

Example(s):

Similarly, the following aural style sheet rules allow a script to be read
aloud in different voices for each role:

DIALOGUE[character=romeo]
     { voice-family: "Lawrence Olivier", charles, male }

DIALOGUE[character=juliet]
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 Default attribute values in DTDs

Matching takes place on attribute values in the document tree. For document
languages other than HTML, default attribute values may be defined in a DTD
or elsewhere. Style sheets should be designed so that they work even if the
default values are not included in the document tree.

Example(s):

For example, consider an element EXAMPLE with an attribute "notation" that
has a default value of "decimal". The DTD fragment might be

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

If the style sheet contains the rules

EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }

then to catch the cases where this attribute is set by default, and not
explicitly, the following rule might be added:

EXAMPLE { /*... default property settings ...*/ }

Because this selector is less specific than an attribute selector, it will
only be used for the default case. Care has to be taken that all other
attribute values that don't get the same style as the default are explicitly
covered.

5.8.3 Class selectors

For style sheets used with HTML, authors may use the dot (.) notation as an
alternative to the "~=" notation when matching on the "class" attribute.
Thus, for HTML, "DIV.value" and "DIV[class~=value]" have the same meaning.
The attribute value must immediately follow the ".".

Example(s):

For example, we can assign style information to all elements with class~=
"pastoral" as follows:

*.pastoral { color: green }  /* all elements with class~=pastoral */

or just

.pastoral { color: green }  /* all elements with class~=pastoral */

The following assigns style only to H1 elements with class~="pastoral":

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

Given these rules, the first H1 instance below would not have green text,
while the second would:

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

To match a subset of "class" values, each value must be preceded by a ".",
in any order.

Example(s):

For example, the following rule matches any P element whose "class"
attribute has been assigned a list of space-separated values that includes
"pastoral" and "marine":


P.pastoral.marine { color: green }

This rule matches when class="pastoral blue aqua marine" but does not match
for class="pastoral blue".

Note. CSS gives so much power to the "class" attribute, that authors could
conceivably design their own "document language" based on elements with
almost no associated presentation (such as DIV and SPAN in HTML) and
assigning style information through the "class" attribute. Authors should
avoid this practice since the structural elements of a document language
often have recognized and accepted meanings and author-defined classes may
not.

5.9 ID selectors

Document languages may contain attributes that are declared to be of type
ID. What makes attributes of type ID special is that no two such attributes
can have the same value; whatever the document language, an ID attribute can
be used to uniquely identify its element. In HTML all ID attributes are
named "id"; XML applications may name ID attributes differently, but the
same restriction applies.

The ID attribute of a document language allows authors to assign an
identifier to one element instance in the document tree. CSS ID selectors
match an element instance based on its identifier. A CSS ID selector
contains a "#" immediately followed by the ID value.

Example(s):

The following ID selector matches the H1 element whose ID attribute has the
value "chapter1":

H1#chapter1 { text-align: center }

In the following example, the style rule matches the element that has the ID
value "z98y". The rule will thus match for the P element:

<HEAD>
  <TITLE>Match P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

In the next example, however, the style rule will only match an H1 element
that has an ID value of "z98y". The rule will not match the P element in
this example:

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

ID selectors have a higher precedence than attribute selectors. For example,
in HTML, the selector #p123 is more specific than [ID=p123] in terms of the
cascade.

Note. In XML 1.0 [XML10], the information about which attribute contains an
element's IDs is contained in a DTD. When parsing XML, UAs do not always
read the DTD, and thus may not know what the ID of an element is. If a style
sheet designer knows or suspects that this will be the case, he should use
normal attribute selectors instead: [name=p371] instead of #p371. However,
the cascading order of normal attribute selectors is different from ID
selectors. It may be necessary to add an "!important" priority to the
declarations: [name=p371] {color: red ! important}. Of course, elements in
XML 1.0 documents without a DTD do not have IDs at all.

5.10 Pseudo-elements and pseudo-classes

In CSS2, style is normally attached to an element based on its position in
the document tree. This simple model is sufficient for many cases, but some
common publishing scenarios may not be possible due to the structure of the
document tree. For instance, in HTML 4.0 (see [HTML40]), no element refers
to the first line of a paragraph, and therefore no simple CSS selector may
refer to it.

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit
formatting based on information that lies outside the document tree.

  • Pseudo-elements create abstractions about the document tree beyond those
    specified by the document language. For instance, document languages do
    not offer mechanisms to access the first letter or first line of an
    element's content. CSS pseudo-elements allow style sheet designers to
    refer to this otherwise inaccessible information. Pseudo-elements may
    also provide style sheet designers a way to assign style to content that
    does not exist in the source document (e.g., the :before and :after
    pseudo-elements give access to generated content).
  • Pseudo-classes classify elements on characteristics other than their
    name, attributes or content; in principle characteristics that cannot be
    deduced from the document tree. Pseudo-classes may be dynamic, in the
    sense that an element may acquire or lose a pseudo-class while a user
    interacts with the document. The exception is ':first-child', which can
    be deduced from the document tree.

Neither pseudo-elements nor pseudo-classes appear in the document source or
document tree.

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may
only appear after the subject of the selector.

Pseudo-elements and pseudo-class names are case-insensitive.

Some pseudo-classes are mutually exclusive, while others can be applied
simultaneously to the same element. In case of conflicting rules, the normal
cascading order determines the outcome.

Conforming HTML user agents may ignore all rules with :first-line or
:first-letter in the selector, or, alternatively, may only support a subset
of the properties on these pseudo-elements.

5.11 Pseudo-classes

5.11.1 :first-child pseudo-class

The :first-child pseudo-class matches an element that is the first child of
some other element.

Example(s):

In the following example, the selector matches any P element that is the
first child of a DIV element. The rule suppresses indentation for the first
paragraph of a DIV:

DIV > P:first-child { text-indent: 0 }

This selector would match the P inside the DIV of the following fragment:

<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>

but would not match the second P in the following fragment:

<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

Example(s):

The following rule sets the font weight to 'bold' for any EM element that is
some descendant of a P element that is a first child:

P:first-child EM { font-weight : bold }

Note that since anonymous boxes are not part of the document tree, they are
not counted when calculating the first child.

For example, the EM in:

<P>abc <EM>default</EM>

is the first child of the P.

The following two selectors are equivalent:

* > A:first-child   /* A is first child of any element */
A:first-child       /* Same */

5.11.2 The link pseudo-classes: :link and :visited

User agents commonly display unvisited links differently from previously
visited ones. CSS provides the pseudo-classes ':link' and ':visited' to
distinguish them:

  • The :link pseudo-class applies for links that have not yet been visited.
  • The :visited pseudo-class applies once the link has been visited by the
    user.

Note. After a certain amount of time, user agents may choose to return a
visited link to the (unvisited) ':link' state.

The two states are mutually exclusive.

The document language determines which elements are hyperlink source
anchors. For example, in HTML 4.0, the link pseudo-classes apply to A
elements with an "href" attribute. Thus, the following two CSS2 declarations
have similar effect:

A:link { color: red }
:link  { color: red }

Example(s):

If the following link:

<A class="external" href="http://out.side/">external link</A>

has been visited, this rule:

A.external:visited { color: blue }

will cause it to be blue.

5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus

Interactive user agents sometimes change the rendering in response to user
actions. CSS provides three pseudo-classes for common cases:

  • The :hover pseudo-class applies while the user designates an element
    (with some pointing device), but does not activate it. For example, a
    visual user agent could apply this pseudo-class when the cursor (mouse
    pointer) hovers over a box generated by the element. User agents not
    supporting interactive media do not have to support this pseudo-class.
    Some conforming user agents supporting interactive media may not be able
    to support this pseudo-class (e.g., a pen device).
  • The :active pseudo-class applies while an element is being activated by
    the user. For example, between the times the user presses the mouse
    button and releases it.
  • The :focus pseudo-class applies while an element has the focus (accepts
    keyboard events or other forms of text input).

These pseudo-classes are not mutually exclusive. An element may match
several of them at the same time.

CSS doesn't define which elements may be in the above states, or how the
states are entered and left. Scripting may change whether elements react to
user events or not, and different devices and UAs may have different ways of
pointing to, or activating elements.

User agents are not required to reflow a currently displayed document due to
pseudo-class transitions. For instance, a style sheet may specify that the
'font-size' of an :active link should be larger than that of an inactive
link, but since this may cause letters to change position when the reader
selects the link, a UA may ignore the corresponding style rule.

Example(s):

A:link    { color: red }    /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:hover   { color: yellow } /* user hovers     */
A:active  { color: lime }   /* active links    */

Note that the A:hover must be placed after the A:link and A:visited rules,
since otherwise the cascading rules will hide the 'color' property of the
A:hover rule. Similarly, because A:active is placed after A:hover, the
active color (lime) will apply when the user both activates and hovers over
the A element.

Example(s):

An example of combining dynamic pseudo-classes:

A:focus { background: yellow }
A:focus:hover { background: white }

The last selector matches A elements that are in pseudo-class :focus and in
pseudo-class :hover.

For information about the presentation of focus outlines, please consult the
section on dynamic focus outlines.

Note. In CSS1, the ':active' pseudo-class was mutually exclusive with
':link' and ':visited'. That is no longer the case. An element can be both
':visited' and ':active' (or ':link' and ':active') and the normal cascading
rules determine which properties apply.

5.11.4 The language pseudo-class: :lang

If the document language specifies how the human language of an element is
determined, it is possible to write selectors in CSS that match an element
based on its language. For example, in HTML [HTML40], the language is
determined by a combination of the "lang" attribute, the META element, and
possibly by information from the protocol (such as HTTP headers). XML uses
an attribute called XML:LANG, and there may be other document
language-specific methods for determining the language.

The pseudo-class ':lang(C)' matches if the element is in language C. Here C
is a language code as specified in HTML 4.0 [HTML40] and RFC 1766 [RFC1766].
It is matc