Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2010. The primary audience is CSS implementors, not CSS authors, as this definition includes modules by specification stability, not Web browser adoption rate.
This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don't cite this document other than as work in progress.
The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css-2010” in the subject, preferably like this: “[css-2010] …summary of comment…”
This document was produced by the CSS Working Group (part of the Style Activity).
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
This document represents the state of CSS as of 2010. The CSS Working Group does not expect any further changes to this document: new snapshots will be published at http://www.w3.org/TR/CSS/ as CSS advances.
When the first CSS specification was published, all of CSS was contained in one document that defined CSS Level 1. CSS Level 2 was defined also by a single, multi-chapter document. However for CSS beyond Level 2, the CSS Working Group chose to adopt a modular approach, where each module defines a part of CSS, rather than to define a single monolithic specification. This breaks the specification into more manageable chunks and allows more immediate, incremental improvement to CSS.
Since different CSS modules are at different levels of stability, the CSS Working Group has chosen to publish this profile to define the current scope and state of Cascading Style Sheets as of late 2010. This profile includes only specifications that we consider stable and for which we have enough implementation experience that we are sure of that stability.
Note that this is not intended to be a CSS Desktop Browser Profile: inclusion in this profile is based on feature stability only and not on expected use or Web browser adoption. This profile defines CSS in its most complete form.
Note also that although we don't anticipate significant changes to the specifications that form this snapshot, their inclusion does are not mean they are frozen. The Working Group will continue to address problems as they are found in these specs. Implementers should monitor www-style and/or the CSS Working Group Blog for any resulting changes, corrections, or clarifications.
This section is non-normative.
In the W3C Process, a Recommendation-track document passes through five levels of stability, summarized below:
In the CSSWG's experience, the recommendation track is not linear. The wider review triggered by an LCWD often results in at least another working draft, possibly several. More significantly, our experience is that many specs enter CR twice, because implementation testing often uncovers significant problems in the spec and thus pushes it back to working draft. Additionally, fixing even minor problems forces a CR to re-enter the Working Draft stage. As a result, although the CSSWG has a clear idea of the stability of the CSS specs, it is very difficult for someone outside the working group to come to that same understanding based on a specification's official status. The CSS Working Group's motivation for creating this document is thus to communicate to others our understanding of the state of CSS.
Cascading Style Sheets does not have versions in the traditional sense; instead it has levels. Each level of CSS builds on the previous, refining definitions and adding features. The feature set of each higher level is a superset of any lower level, and the behavior allowed for a given feature in a higher level is a subset of that allowed in the lower levels. A user agent conforming to a higher level of CSS is thus also conformant to all lower levels.
The CSS Working Group considers the CSS1 specification to be obsolete. CSS Level 1 is defined as all the features defined in the CSS1 specification (properties, values, at-rules, etc), but using the syntax and definitions in the CSS2.1 specification. CSS Style Attributes defines its inclusion in element-specific style attributes.
Although the CSS2 specification is technically a W3C Recommendation, it passed into the Recommendation stage before the W3C had defined the Candidate Recommendation stage. Over time implementation experience and further review has brought to light many problems in the CSS2 specification, so instead of expanding an already unwieldy errata list, the CSS Working Group chose to define CSS Level 2 Revision 1 (CSS2.1). In case of any conflict between the two specs CSS2.1 contains the definitive definition.
Once CSS2.1 became Candidate Recommendation—effectively though not officially the same level of stability as CSS2—obsoleted the CSS2 Recommendation. Features in CSS2 that were dropped from CSS2.1 should be considered to be at the Candidate Recommendation stage, but note that many of these have been or will be pulled into a CSS Level 3 working draft, in which case that specification will, once it reaches CR, obsolete the definitions in CSS2.
The CSS2.1 specification defines CSS Level 2 and the CSS Style Attributes specification defines its inclusion in element-specific style attributes.
This section is non-normative.
CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification. The CSS Working Group intends that the new CSS modules will not contradict the CSS2.1 specification: only that they will add functionality and refine definitions. As each module is completed, it will be plugged in to the existing system of CSS2.1 plus previously-completed modules.
From this level on modules are levelled independently: for example Selectors Level 4 may well be defined before CSS Line Module Level 3.
As of 2010, Cascading Style Sheets (CSS) is defined by the following specifications.
So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.
Not all implementations will implement all functionality defined in CSS. For example, an implementation may choose to implement only the functionality required by a CSS Profile. Profiles define a subset of CSS considered fundamental for a specific class of CSS implementations. The W3C CSS Working Group defines the following CSS profiles:
To avoid clashes with future CSS features, the CSS2.1 specification reserves a prefixed syntax for proprietary and experimental extensions to CSS.
Prior to a specification reaching the Candidate Recommendation stage in the W3C process, all implementations of a CSS feature are considered experimental. The CSS Working Group recommends that implementations use a vendor-prefixed syntax for such features, including those in W3C Working Drafts. This avoids incompatibilities with future changes in the draft.
For legacy reasons, certain experimental CSS properties do
not follow this prefixing convention. Two common examples are the
‘word-wrap
’ and ‘text-overflow
’ properties, which were
introduced unprefixed by Microsoft Internet Explorer prior to the
introduction of the vendor prefixing policy in CSS2.1 and were
subsequently implemented unprefixed by other browsers, creating a
dependency on the unprefixed names despite the lack of a W3C spec. Any
other legacy exceptions should be made in consultation with the CSS
Working Group.
Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.
Further information on submitting testcases and implementation reports can be found from on the CSS Working Group's website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.
CSS2.1 implementations are encouraged, but not required, to submit an implementation report.
These sections are non-normative.
Name | Values | Initial value | Applies to | Inherited? | Percentages | Media |
---|---|---|---|---|---|---|
background-attachment
| scroll | fixed | inherit | scroll | no | visual | ||
background-color
| <color> | inherit | transparent | no | visual | ||
background-image
| <uri> | none | inherit | none | no | visual | ||
background-position
| [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit | 0% 0% | no | refer to the size of the box itself | visual | |
background-repeat
| repeat | repeat-x | repeat-y | no-repeat | inherit | repeat | no | visual | ||
background
| [‘background-color ’ || ‘background-image ’ || ‘background-repeat ’ || ‘background-attachment ’ || background-position ]
| inherit
| see individual properties | no | allowed on ‘background-position ’
| visual | |
border-collapse
| collapse | separate | inherit | separate | ‘table ’ and ‘inline-table ’ elements
| yes | visual | |
border-color
| [ <color> ]{1,4} | inherit | see individual properties | no | visual | ||
border-spacing
| <length> <length>? | inherit | 0 | ‘table ’ and ‘inline-table ’ elements
| yes | visual | |
border-style
| <border-style>{1,4} | inherit | see individual properties | no | visual | ||
border-top
border-right
border-bottom
border-left
| [ <border-width>
|| <border-style>
|| border-top-color
] | inherit
| see individual properties | no | visual | ||
border-top-color
border-right-color
border-bottom-color
border-left-color
| <color> | inherit | the value of the ‘color ’
property
| no | visual | ||
border-top-style
border-right-style
border-bottom-style
border-left-style
| <border-style> | inherit | none | no | visual | ||
border-top-width
border-right-width
border-bottom-width
border-left-width
| <border-width> | inherit | medium | no | visual | ||
border-width
| <border-width>{1,4} | inherit | see individual properties | no | visual | ||
border
| [ <border-width>
|| <border-style>
|| border-top-color
] | inherit
| see individual properties | no | visual | ||
bottom
| <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
caption-side
| top | bottom | inherit | top | ‘table-caption ’ elements
| yes | visual | |
clear
| none | left | right | both | inherit | none | block-level elements | no | visual | |
clip
| <shape> | auto | inherit | auto | absolutely positioned elements | no | visual | |
color
| <color> | inherit | depends on user agent | yes | visual | ||
content
| normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | normal | :before and :after pseudo-elements | no | all | |
counter-increment
| [ <identifier> <integer>? ]+ | none | inherit | none | no | all | ||
counter-reset
| [ <identifier> <integer>? ]+ | none | inherit | none | no | all | ||
cursor
| [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit | auto | yes | visual, interactive | ||
direction
| ltr | rtl | inherit | ltr | all elements, but see prose | yes | visual | |
display
| inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | inline | no | all | ||
empty-cells
| show | hide | inherit | show | ‘table-cell ’ elements
| yes | visual | |
float
| left | right | none | inherit | none | all, but see 9.7 | no | visual | |
font-family
| [ [ <family-name> | <generic-family> ] [, <family-name>| <generic-family> ]* ] | inherit | depends on user agent | yes | visual | ||
font-size
| <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium | yes | refer to inherited font size | visual | |
font-style
| normal | italic | oblique | inherit | normal | yes | visual | ||
font-variant
| normal | small-caps | inherit | normal | yes | visual | ||
font-weight
| normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal | yes | visual | ||
font
| [ [ ‘font-style ’ || ‘font-variant ’ || ‘font-weight ’ ]? ‘font-size ’ [ / ‘line-height ’ ]? font-family
] | caption | icon | menu | message-box | small-caption | status-bar |
inherit
| see individual properties | yes | see individual properties | visual | |
height
| <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
left
| <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
letter-spacing
| normal | <length> | inherit | normal | yes | visual | ||
line-height
| normal | <number> | <length> | <percentage> | inherit | normal | yes | refer to the font size of the element itself | visual | |
list-style-image
| <uri> | none | inherit | none | elements with ‘display:
list-item ’
| yes | visual | |
list-style-position
| inside | outside | inherit | outside | elements with ‘display:
list-item ’
| yes | visual | |
list-style-type
| disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit | disc | elements with ‘display:
list-item ’
| yes | visual | |
list-style
| [ ‘list-style-type ’ || ‘list-style-position ’ || list-style-image
] | inherit
| see individual properties | elements with ‘display:
list-item ’
| yes | visual | |
margin-right
margin-left
| <margin-width> | inherit | 0 | all elements except elements with table display types other than table-caption, table and inline-table | no | refer to width of containing block | visual |
margin-top
margin-bottom
| <margin-width> | inherit | 0 | all elements except elements with table display types other than table-caption, table and inline-table | no | refer to width of containing block | visual |
margin
| <margin-width>{1,4} | inherit | see individual properties | all elements except elements with table display types other than table-caption, table and inline-table | no | refer to width of containing block | visual |
max-height
| <length> | <percentage> | none | inherit | none | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
max-width
| <length> | <percentage> | none | inherit | none | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
min-height
| <length> | <percentage> | inherit | 0 | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
min-width
| <length> | <percentage> | inherit | 0 | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
opacity
| <number> | inherit | 1 | all | no | visual | |
orphans
| <integer> | inherit | 2 | block container elements | yes | visual, paged | |
outline-color
| <color> | invert | inherit | invert | no | visual, interactive | ||
outline-style
| <border-style> | inherit | none | no | visual, interactive | ||
outline-width
| <border-width> | inherit | medium | no | visual, interactive | ||
outline
| [ ‘outline-color ’ || ‘outline-style ’ || outline-width
] | inherit
| see individual properties | no | visual, interactive | ||
overflow
| visible | hidden | scroll | auto | inherit | visible | block containers | no | visual | |
padding-top
padding-right
padding-bottom
padding-left
| <padding-width> | inherit | 0 | all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column | no | refer to width of containing block | visual |
padding
| <padding-width>{1,4} | inherit | see individual properties | all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column | no | refer to width of containing block | visual |
page-break-after
| auto | always | avoid | left | right | inherit | auto | block-level elements (but see text) | no | visual, paged | |
page-break-before
| auto | always | avoid | left | right | inherit | auto | block-level elements (but see text) | no | visual, paged | |
page-break-inside
| avoid | auto | inherit | auto | block-level elements (but see text) | no | visual, paged | |
position
| static | relative | absolute | fixed | inherit | static | no | visual | ||
quotes
| [<string> <string>]+ | none | inherit | depends on user agent | yes | visual | ||
right
| <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
table-layout
| auto | fixed | inherit | auto | ‘table ’ and ‘inline-table ’ elements
| no | visual | |
text-align
| left | right | center | justify | inherit | a nameless value that acts as ‘left ’ if ‘direction ’ is ‘ltr ’, ‘right ’ if ‘direction ’ is ‘rtl ’
| block containers | yes | visual | |
text-decoration
| none | [ underline || overline || line-through || blink ] | inherit | none | no (see prose) | visual | ||
text-indent
| <length> | <percentage> | inherit | 0 | block containers | yes | refer to width of containing block | visual |
text-transform
| capitalize | uppercase | lowercase | none | inherit | none | yes | visual | ||
top
| <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
unicode-bidi
| normal | embed | bidi-override | inherit | normal | all elements, but see prose | no | visual | |
vertical-align
| baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | baseline | inline-level and ‘table-cell ’ elements
| no | refer to the ‘line-height ’
of the element itself
| visual |
visibility
| visible | hidden | collapse | inherit | visible | yes | visual | ||
white-space
| normal | pre | nowrap | pre-wrap | pre-line | inherit | normal | yes | visual | ||
widows
| <integer> | inherit | 2 | block container elements | yes | visual, paged | |
width
| <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
word-spacing
| normal | <length> | inherit | normal | yes | visual | ||
z-index
| auto | <integer> | inherit | auto | positioned elements | no | visual |
Pattern | Meaning | Described in section | First defined in level |
---|---|---|---|
* | any element | Universal selector | 2 |
E | an element of type E | Type selector | 1 |
E[foo] | an E element with a "foo" attribute | Attribute selectors | 2 |
E[foo="bar"] | an E element whose "foo" attribute value is exactly equal to "bar" | Attribute selectors | 2 |
E[foo~="bar"] | an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" | Attribute selectors | 2 |
E[foo^="bar"] | an E element whose "foo" attribute value begins exactly with the string "bar" | Attribute selectors | 3 |
E[foo$="bar"] | an E element whose "foo" attribute value ends exactly with the string "bar" | Attribute selectors | 3 |
E[foo*="bar"] | an E element whose "foo" attribute value contains the substring "bar" | Attribute selectors | 3 |
E[foo|="en"] | an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" | Attribute selectors | 2 |
E:root | an E element, root of the document | Structural pseudo-classes | 3 |
E:nth-child(n) | an E element, the n-th child of its parent | Structural pseudo-classes | 3 |
E:nth-last-child(n) | an E element, the n-th child of its parent, counting from the last one | Structural pseudo-classes | 3 |
E:nth-of-type(n) | an E element, the n-th sibling of its type | Structural pseudo-classes | 3 |
E:nth-last-of-type(n) | an E element, the n-th sibling of its type, counting from the last one | Structural pseudo-classes | 3 |
E:first-child | an E element, first child of its parent | Structural pseudo-classes | 2 |
E:last-child | an E element, last child of its parent | Structural pseudo-classes | 3 |
E:first-of-type | an E element, first sibling of its type | Structural pseudo-classes | 3 |
E:last-of-type | an E element, last sibling of its type | Structural pseudo-classes | 3 |
E:only-child | an E element, only child of its parent | Structural pseudo-classes | 3 |
E:only-of-type | an E element, only sibling of its type | Structural pseudo-classes | 3 |
E:empty | an E element that has no children (including text nodes) | Structural pseudo-classes | 3 |
E:link E:visited | an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) | The link pseudo-classes | 1 |
E:active E:hover E:focus | an E element during certain user actions | The user action pseudo-classes | 1 and 2 |
E:target | an E element being the target of the referring URI | The target pseudo-class | 3 |
E:lang(fr) | an element of type E in language "fr" (the document language specifies how language is determined) | The :lang() pseudo-class | 2 |
E:enabled E:disabled | a user interface element E which is enabled or disabled | The UI element states pseudo-classes | 3 |
E:checked | a user interface element E which is checked (for instance a radio-button or checkbox) | The UI element states pseudo-classes | 3 |
E::first-line | the first formatted line of an E element | The ::first-line pseudo-element | 1 |
E::first-letter | the first formatted letter of an E element | The ::first-letter pseudo-element | 1 |
E::before | generated content before an E element | The ::before pseudo-element | 2 |
E::after | generated content after an E element | The ::after pseudo-element | 2 |
E.warning | an E element whose class is "warning" (the document language specifies how class is determined). | Class selectors | 1 |
E#myid | an E element with ID equal to "myid". | ID selectors | 1 |
E:not(s) | an E element that does not match simple selector s | Negation pseudo-class | 3 |
E F | an F element descendant of an E element | Descendant combinator | 1 |
E > F | an F element child of an E element | Child combinator | 2 |
E + F | an F element immediately preceded by an E element | Adjacent sibling combinator | 2 |
E ~ F | an F element preceded by an E element | General sibling combinator | 3 |