Cascading Style Sheets, Level 2 (original) (raw)

REC-CSS2-19980512

Cascading Style Sheets, level 2

CSS2 Specification

W3C Recommendation 12-May-1998

This version:

http://www.w3.org/TR/1998/REC-CSS2-19980512

Latest version:

http://www.w3.org/TR/REC-CSS2

Previous version:

http://www.w3.org/TR/1998/PR-CSS2-19980324

Editors:

Bert Bos<bbos@w3.org>
Håkon Wium Lie<howcome@w3.org>
Chris Lilley<chris@w3.org>
Ian Jacobs<ij@w3.org>

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/1998/REC-CSS2-19980512

a plain text file:

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt,

HTML as a gzip'ed tar file:

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz,

HTML as a zip file (this is a '.zip' file not an '.exe'):

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip,

as well as a gzip'ed PostScript file:

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz,

and a PDF file:

http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf.

In case of a discrepancy between the various forms of the specification, http://www.w3.org/TR/1998/REC-CSS2-19980512 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 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