CSS2 Specification

W3C Working Draft 04-November-1997


This specification defines Cascading Style Sheet, Level 2.

Status of this document

This is a W3C Working Draft for review by W3C members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". This is work in progress and does not imply endorsement by, or the consensus of, either W3C or members of the CSS working group.

This document has been produced as part of the W3C Style Activity, and is intended as a draft of a proposed recommendation for CSS2.

If you did not get this document directly from the W3C website you may want to check whether you have the latest version of this document by looking at the list of W3C technical reports at <http://www.w3.org/TR/>.

CSS2 builds on CSS1, specified in http://www.w3.org/TR/REC-CSS1-961217. All valid CSS1 stylesheets are valid CSS2 stylesheets.



Please send detailed comments on this document to the editors. We cannot guarantee a personal response but we will try when it is appropriate. Public discussion on CSS features takes place on www-style@w3.org and messages are archived at http://lists.w3.org/Archives/Public/www-style/.

Table of Contents

1 About the CSS2 Specification
1.1 How to read the specification
1.2 How the specification is organized
1.3 Acknowledgments

2 Introduction to CSS2
2.1 A brief CSS2 tutorial
2.2 Design principles behind CSS2

3 Definitions and document conventions
3.1 Definitions
   3.1.1 Document language
   3.1.2 Element
   3.1.3 User agent (or UA)
   3.1.4 Conforming user agent
   3.1.5 Default style sheet
3.2 Conventions
   3.2.1 Document language elements and attributes
   3.2.2 CSS property definitions
   3.2.3 HTML conventions

4 CSS2 syntax and basic data types
4.1 Syntax
   4.1.1 Tokenization
   4.1.2 Characters and case
   4.1.3 Statements
   4.1.4 At-rules
   4.1.5 Blocks
   4.1.6 Rule sets, declaration blocks, and selectors
   4.1.7 Declarations and properties
   4.1.9 More examples
4.2 Values
   4.2.1 Integers and numbers
   4.2.2 Lengths
   4.2.3 Percentages
   4.2.4 URLs
   4.2.5 Colors
   4.2.6 Angles
   4.2.7 Time
   4.2.8 Frequencies
4.3 CSS embedded in HTML
4.4 CSS as a stand-alone file
4.5 Character escapes in CSS

5 CSS2 processing model
5.1 Introduction to the CSS2 processing model
5.2 The document tree
5.3 Inheritance
5.4 Rendering objects

6 Selectors
6.1 Type selectors
6.2 Grouping
6.3 Attribute selectors
   6.3.1 Matching attributes, single values, and multiple values
   6.3.2 The class and id attribute in HTML
   6.3.3 The class attribute in other document languages: @class
   6.3.4 The id attribute
6.4 Contextual selectors
6.5 Parent-child selectors
6.6 Sequential selectors
6.7 Pseudo-elements and pseudo-classes
   6.7.1 The :first-line pseudo-element
   6.7.2 The :first-letter pseudo-element
   6.7.3 Overlapping pseudo-elements
   6.7.4 Pseudo-elements with contextual selectors
   6.7.5 Anchor pseudo-classes: :link, :active, and :visited
   6.7.6 Combining pseudo-elements with normal classes
   6.7.7 Colliding attribute selectors and pseudo-classes

7 Cascade
7.1 Cascading order
   7.1.1 'Important' rules
   7.1.2 Cascading order in HTML
   7.1.3 Precedence of non-CSS presentational hints

8 Media types
8.1 Introduction to media types
8.2 Specifying media-dependent style sheets
   8.2.1 The @media rule
   8.2.2 The media-dependent @import rule
8.3 Recognized media types
   8.3.1 The canvas
      Scrollable media

9 The box model
9.1 Introduction to the box model
9.2 Box dimensions
9.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'
      Values for <margin-width>
9.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'
   9.4.1 Values for <padding-width>
9.5 Border properties
   9.5.1 Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width'
      Values for <border-width>
   9.5.2 Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-color'
   9.5.3 Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'
      Values for <border-style>
9.6 Example of margins, padding, and borders

10 Visual rendering model
10.1 Introduction to the visual rendering model
10.2 Establishing box positions
   10.2.1 Containing blocks
   10.2.2 Direction of flow
10.3 Normal flow
   10.3.1 Block-level layout
      List-item elements
   10.3.2 Inline layout
      Anonymous text boxes
   10.3.3 Dual-mode elements: run-in and compact
   10.3.4 Relative positioning
   10.3.5 Controlling layout behavior: the 'display' property
10.4 Floats: 'float' and 'clear'
   10.4.1 Controlling floats
10.5 Absolute positioning
   10.5.1 Properties to specify position: 'top', 'right', 'bottom', 'left'
   10.5.2 Fixed positioning
10.6 Comparison of normal, relative, floating, absolute positioning
   10.6.1 Normal flow
   10.6.2 Relative positioning
   10.6.3 Floating a box
   10.6.4 Absolute positioning
10.7 Z-order: Layered presentation
   10.7.1 Specifying the stack level: the 'z-index' property
10.8 Multicolumn layout

11 Visual rendering model details
11.1 Box width calculations: the 'width' property
   11.1.1 Relationship of width dimensions
   11.1.2 Width of floats and replaced elements
   11.1.3 Width of absolutely positioned elements
   11.1.4 Minimum and maximum widths: 'min-width' and 'max-width'
11.2 Box height calculations: the 'height' property
   11.2.1 Height of replaced elements
   11.2.2 Height of absolutely positioned elements
   11.2.3 Minimum and maximum heights: 'min-height' and 'max-height'
   11.2.4 Collapsing margins
11.3 Line height calculations: the 'line-height' and 'vertical-align' properties
11.4 Floating constraints
11.5 Overflow and clipping
   11.5.1 Overflow: the 'overflow' property
   11.5.2 Clipping: the 'clip' property
11.6 Visibility: the 'visibility' property
11.7 Dynamic positioning
11.8 Filters

12 Paged media
12.1 Introduction to paged media
12.2 Page breaks
   12.2.1 Page break properties: 'page-break-before', 'page-break-after', 'orphans', and 'widows'
   12.2.2 Allowed page breaks
   12.2.3 Forced page breaks
   12.2.4 "Best" page breaks
12.3 Page boxes: the @page rule
   12.3.1 Page margins
   12.3.2 Page size: the 'size' property
      Rendering page boxes that do not fit a target sheet
   12.3.3 Crop marks: the 'marks property
   12.3.4 Left and right pages
   12.3.5 Running headers and footers
   12.3.6 Marking elements for the running headers & footers
   12.3.7 Content outside the page box
12.4 Cascading in the page context

13 Colors and Backgrounds
13.1 Foreground color: the 'color' property
13.2 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'

14 Fonts
14.1 Introduction
14.2 Font specification
   14.2.1 Font specification properties
   14.2.2 Font family: the 'font-family'
   14.2.3 Font style: the 'font-style', 'font-variant', and 'font-weight' properties
   14.2.4 Font size: the 'font-size' property
   14.2.5 Shorthand font property: the 'font' property
   14.2.6 Generic font families
14.3 Font selection
   14.3.1 Font Descriptions and @font-face
   14.3.2 Descriptors for Selecting a Font: 'font-family', 'font-style', 'font-variant', 'font-weight', and 'font-size'
   14.3.3 Descriptors for Font Data Qualification: 'unicode-range'
   14.3.4 Descriptor for Numeric Values: 'units-per-em'
   14.3.5 Descriptor for Referencing: 'src'
   14.3.6 Descriptors for Matching: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent', and 'descent'
   14.3.7 Descriptors for Synthesis: 'widths' and 'definition-src'
   14.3.8 Descriptors for Alignment: 'baseline', 'centerline', 'mathline', and 'topline'
14.4 Font Characteristics
   14.4.1 Introducing Font Characteristics
   14.4.2 Adorned font name
   14.4.3 Central Baseline
   14.4.4 Co-ordinate units on the em square
   14.4.5 Font encoding tables
   14.4.6 Font family name
   14.4.7 Glyph Representation widths
   14.4.8 Horizontal stem width
   14.4.9 Height of capital glyph representations
   14.4.10 Height of lowercase glyph representations
   14.4.11 Lower Baseline
   14.4.12 Mathematical Baseline
   14.4.13 Maximal bounding box
   14.4.14 Maximum unaccented height
   14.4.15 Maximum unaccented depth
   14.4.16 Panose-1 number
   14.4.17 Range of Unicode characters
   14.4.18 Top Baseline
   14.4.19 Vertical stem width
   14.4.20 Vertical stroke angle
14.5 Font matching algorithm
   14.5.1 Examples of font matching

15 Text
15.1 Indentation: the 'text-indent' property
15.2 Alignment: the 'alignment' property
15.3 Decoration
   15.3.1 Underlining, over lining, striking, and blinking: the 'text-decoration' property
   15.3.2 Text shadows: the 'text-shadow' property
15.4 Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties
15.5 Case
   15.5.1 Capitalization: the 'text-transform' property
   15.5.2 Special first letter/first line
15.6 White space: the 'white-space' property
15.7 Generated text
15.8 Automatic numbering
15.9 Text in HTML
   15.9.1 Forcing a line break

16 Lists
16.1 Visual formatting of lists
   16.1.1 List properties: 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style'

17 Tables
17.1 Table layout
   17.1.1 Row and column properties: 'column-span', and 'row-span'
17.2 Computing widths and heights
17.3 Placement of the borders
17.4 Conflict resolution for borders
17.5 Properties for columns and rows
17.6 Vertical alignment of cells in a row
17.7 Horizontal alignment of cells in a column
17.8 Table captions: the 'caption-side' property
17.9 Generating speech: the 'speak-header-cell' property
17.10 Table implementation notes

18 User interface
18.1 Cursors: the 'cursor' property
18.2 User preferences for colors
18.3 Other rendering issues that depend on user agents
   18.3.1 Magnification

19 Aural style sheets
19.1 Aural cascading style sheet properties
   19.1.1 Volume properties: 'volume'
   19.1.2 Speaking properties: 'speak'
   19.1.3 Pause properties: 'pause-before', 'pause-after', and 'pause'
   19.1.4 Cue properties: 'cue-before', 'cue-after', and 'cue'
   19.1.5 Mixing properties: 'play-during'
   19.1.6 Spatial properties: 'azimuth' and 'elevation'
   19.1.7 Voice characteristic properties: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', 'richness', 'speak-punctuation', 'speak-date', 'speak-numeral', and 'speak-time'

Appendix A: A sample style sheet for HTML 4.0

Appendix B: Changes from CSS1

Appendix C: Implementation and performance notes
   Gamma Correction
   Glossary of font terms
   Font retrieval

Appendix D: The grammar of CSS2

Appendix E: Aids to Web Fonts implementation
Meaning of the Panose Digits
Deducing Unicode Ranges for TrueType

Normative references
Informative references