<pre class='metadata'>

Title: Cascading Style Sheets (CSS) Level 2

Shortname: css2

Level:

Status: ED

Work Status: Stable

Group: csswg

ED: https://drafts.csswg.org/css2/

TR: https://www.w3.org/TR/CSS2/

Previous version: https://www.w3.org/TR/2011/REC-CSS2-20110607/

Previous version: https://www.w3.org/TR/2008/REC-CSS2-20080411/

Editor: Sam Sneddon, https://gsnedders.com

Editor: Tantek &Ccedil;elik, tantek@cs.stanford.edu

Former Editor: Editor: Bert Bos, W3C, mailto:bert@w3.org, w3cid 3343

Former Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

Former Editor: Ian Hickson, ian@hixie.ch

Former Editor: H&aring;kon Wium Lie, Opera Software, howcome@opera.com

WPT Display: inline

Abstract:

This specification defines Cascading Style Sheets level&nbsp;2 (CSS&nbsp;2)

revision&nbsp;2 (CSS&nbsp;2.2). CSS is a style sheet language

that allows

authors and users to attach style (e.g., fonts and spacing) to

structured documents (e.g., HTML documents and XML

applications). By separating the presentation style of documents from

the content of documents, CSS simplifies Web authoring and

site maintenance.

It 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. It also supports

content positioning, table layout, features for internationalization

and some properties related to user interface.

See [[#app-changes]] for changes from CSS&nbsp;2.1,

and <a href="/TR/2011/REC-CSS21-2011-06-07/changes.html">appendix C of CSS&nbsp;2.1

for changes from CSS2&nbsp;(1998)</a>.

Note that several CSS2&nbsp;(1998) features

were removed from CSS&nbsp;2 in CSS&nbsp;2.1 due to lack of implementations;

specifications that wish to reference those features

should reference the latest applicable CSS module, see [[CSS]].

Required IDs: abs-non-replaced-height, abs-non-replaced-width, absolutely-positioned,

absolute-positioning, absrel-units, abs-replaced-height, abs-replaced-width, abstract,

acknowledgements, actual-value, addressing, adjacent-selectors, algorithm, alignment-prop,

all-media-group, allowed-page-breaks, almost, ancestor, angles, anonymous,

anonymous-block-level, anonymous-boxes, applies-to, at-import, at-media-rule, at-rules,

attribute, attribute-selectors, audio-media-group, aural-intro, aural-media-group, aural-tables,

author, authoring, AutoNumber2, auto-table-layout, background, background-properties,

baseline-below, before-after-content, before-and-after, best-page-breaks, bfc-next-to-float,

bidi, bidi-box-model, bitmap-media-group, block, block-boxes, block-container-box,

block-formatting, block-level, block-replaced-width, block-root-margin, blockwidth,

border-color-properties, border-conflict-resolution, border-edge, border-properties, borders,

border-shorthand-properties, border-style-properties, border-width-properties, box-border-area,

box-content-area, box-dimensions, box-gen, box-margin-area, box-model, box-padding-area,

break-inside, canvas, caps-prop, caption-position, cascade, cascading-order, changes, characters,

charset, child, child-selectors, choose-position, clarifications, class-html, clearance,

clipping, collapsing-borders, collapsing-margins, colors, color-units, column-alignment, columns,

combinator, comment, comments, comp-abspos, comparison, comp-float, comp-normal-flow,

comp-relpos, computed-defs, computed-value, Computing_heights_and_margins,

Computing_widths_and_margins, conformance, conformance-term, containing-block,

containing-block-details, content, content-edge, content-height, content-width,

continuous-media-group, conventions, counter, counters, counter-styles, ctrlchars, cue-props,

cursive-def, cursor-props, declaration, decoration, default-attrs, default-style-sheet,

defined-to-exist, defs, descendant, descendant-selectors, design-principles, direction,

display-prop, dis-pos-flo, doc-language, doclanguage, doctree, dynamic-effects, dynamic-outlines,

dynamic-pseudo-classes, each-box, egbidiwscollapse, element, Emacspeak, empty, empty-cells,

em-width, errors, escaped-characters, escaping, ex, fantasy-def, first-child,

first-formatted-line, first-letter, first-line, first-line-pseudo, fixed-positioning,

fixed-table-layout, float-position, float-replaced-width, float-rules, floats, float-width,

flow-control, following, font-boldness, font-family-prop, font-shorthand, fonts-intro,

font-size-props, font-styling, forced, formatting-structure, frequencies, generated-text,

generic-font-families, grammar, grid-media-group, grouping, height-layout, html-tutorial,

id-selectors, ignore, illegal, illegalvalues, images-and-longdesc, img-anon-block, img-bach1,

img-bach2, img-bg-repeat, img-boxdim, img-boxdimeg, img-cell-align, img-changebar, img-clip,

img-CSStbl3, img-doctree, img-first-letter, img-first-letter2, img-float2p, img-floatclear,

img-floateg, img-flow-absolute, img-flow-abs-rel, img-flow-clear, img-flow-clear2,

img-flow-float, img-flow-generic, img-flow-relative, img-flow-static, img-frame,

img-inline-layout, img-list-inout, img-overflow1, img-overflow2, img-page-info, img-pixel1,

img-pixel2, img-table1, img-table-overlap, img-tbl-border-conflict, img-tbl-empty,

img-tbl-layers, img-tbl-spacing, img-tbl-width, important-rules, indentation-prop, informative, inheritance,

inherited-prop, initial-containing-block, initial-value, inlineblock-replaced-width,

inlineblock-width, inline-box, inline-boxes, inline-box-height, inline-formatting, inline-level,

inline-non-replaced, inline-replaced-height, inline-replaced-width, inline-width, inner-edge,

interactive-media-group, internal, internal-table-element, intrinsic, keywords, known-errors,

lang, layers, leading, length-units, line-box, line-height, lining-striking-props,

link-pseudo-classes, lists, list-style, magnification, margin-edge, margin-properties,

matching-attrs, media-applies, media-groups, media-intro, media-sheets, media-types,

message-entity, min-max-heights, min-max-widths, mixing-props, model, monospace-def,

mpb-examples, multi-font-inline-height, new, normal-block, normal-flow, normative,

notes-and-examples, numbers, organization, outer-edge, outline-focus, outlines, outside-page-box,

overflow, overflow-clipping, overlapping-example, padding-edge, padding-properties, page-area,

page-box, page-break-props, page-breaks, page-cascade, page-context, paged-media-group,

page-intro, page-margins, page-selectors, painting-order, parent, parsing-errors,

pattern-matching, pause-props, percentage-units, percentage-wrt, phantom-line-box,

positioned-element, positioning-scheme, position-props, preceding, preshint, principal-box,

processing-model, propdef-azimuth, propdef-background, propdef-background-attachment,

propdef-background-color, propdef-background-image, propdef-background-position,

propdef-background-repeat, propdef-border, propdef-border-bottom, propdef-border-bottom-color,

propdef-border-bottom-style, propdef-border-bottom-width, propdef-border-collapse,

propdef-border-color, propdef-border-left, propdef-border-left-color, propdef-border-left-style,

propdef-border-left-width, propdef-border-right, propdef-border-right-color,

propdef-border-right-style, propdef-border-right-width, propdef-border-spacing,

propdef-border-style, propdef-border-top, propdef-border-top-color, propdef-border-top-style,

propdef-border-top-width, propdef-border-width, propdef-bottom, propdef-caption-side,

propdef-clear, propdef-clip, propdef-color, propdef-content, propdef-counter-increment,

propdef-counter-reset, propdef-cue, propdef-cue-after, propdef-cue-before, propdef-cursor,

propdef-direction, propdef-display, propdef-elevation, propdef-empty-cells, propdef-float,

propdef-font, propdef-font-family, propdef-font-size, propdef-font-style, propdef-font-variant,

propdef-font-weight, propdef-height, propdef-left, propdef-letter-spacing, propdef-line-height,

propdef-list-style, propdef-list-style-image, propdef-list-style-position,

propdef-list-style-type, propdef-margin, propdef-margin-bottom, propdef-margin-left,

propdef-margin-right, propdef-margin-top, propdef-max-height, propdef-max-width,

propdef-min-height, propdef-min-width, propdef-orphans, propdef-outline, propdef-outline-color,

propdef-outline-style, propdef-outline-width, propdef-overflow, propdef-padding,

propdef-padding-bottom, propdef-padding-left, propdef-padding-right, propdef-padding-top,

propdef-page-break-after, propdef-page-break-before, propdef-page-break-inside, propdef-pause,

propdef-pause-after, propdef-pause-before, propdef-pitch, propdef-pitch-range,

propdef-play-during, propdef-position, propdef-property-name, propdef-quotes, propdef-richness,

propdef-right, propdef-speak, propdef-speak-header, propdef-speak-numeral,

propdef-speak-punctuation, propdef-speech-rate, propdef-stress, propdef-table-layout,

propdef-text-align, propdef-text-decoration, propdef-text-indent, propdef-text-transform,

propdef-top, propdef-unicode-bidi, propdef-vertical-align, propdef-visibility,

propdef-voice-family, propdef-volume, propdef-white-space, propdef-widows, propdef-width,

propdef-word-spacing, propdef-z-index, properties, property, property-defs, pseudo-classes,

pseudo-class-selectors, pseudo-elements, pseudo-element-selectors, q1.0, q10.0, q11.0, q14.0,

q15.0, q16.0, q17.0, q18.0, q19.0, q2.0, q20.0, q22.0, q23.0, q24.0, q25.0, q25.4, q26.0, q27.0,

q3.0, q4, q4.0, q5.0, q6.0, q7.0, q9.0, quotes, quotes-insert, quotes-specify, reading, relative-positioning, rendered-content,

replaced-element, root, root-height, rule-sets, run-in, sample, sans-serif-def, scanner, scope,

selector-syntax, separated-borders, serif-def, shorthand, shrink-to-fit-float, sibling,

simple-selector, small-caps, source-document, spacing-props, spatial-props, speak-headers,

speaking-props, specificity, specified-value, speech-media-group, speech-props, stacking-defs,

stacking-notes, stack-level, statements, static-media-group, static-position, status, strings,

strut, style-sheet, sTypoAscender, subject, syntax, system-colors, system-fonts,

table-border-styles, table-display, table-layers, table-layout, tables-intro, tabular-container,

tactile-media-group, TanteksColorDiagram20020613, text-css, the-canvas, the-height-property,

the-page, the-width-property, times, title, toc, tokenization, tokenizer-diffs, type-selectors,

ua, undisplayed-counters, unexpected-eof, universal-selector, unsupported-values, uri,

used-value, usedValue, user, user-agent, valid-style-sheet, value-def-absolute-size,

value-def-angle, value-def-armenian, value-def-block, value-def-bo-none, value-def-border-style,

value-def-border-width, value-def-bottom, value-def-circle, value-def-close-quote,

value-def-color, value-def-counter, value-def-dashed, value-def-decimal,

value-def-decimal-leading-zero, value-def-disc, value-def-dotted, value-def-double,

value-def-family-name, value-def-frequency, value-def-generic-family, value-def-generic-voice,

value-def-georgian, value-def-groove, value-def-hidden, value-def-identifier, value-def-inherit,

value-def-inline, value-def-inline-block, value-def-inline-table, value-def-inset,

value-def-integer, value-def-invert, value-def-left, value-def-length, value-def-list-item,

value-def-lower-greek, value-def-lower-latin, value-def-lower-roman, value-def-margin-width,

value-def-no-close-quote, value-def-no-open-quote, value-def-number, value-def-open-quote,

value-def-outset, value-def-padding-width, value-def-percentage, value-def-relative-size,

value-def-ridge, value-def-right, value-defs, value-def-shape, value-def-solid,

value-def-specific-voice, value-def-square, value-def-string, value-def-table,

value-def-table-caption, value-def-table-cell, value-def-table-column,

value-def-table-column-group, value-def-table-footer-group, value-def-table-header-group,

value-def-table-row, value-def-table-row-group, value-def-time, value-def-top,

value-def-upper-latin, value-def-upper-roman, value-def-uri, values, value-stages,

vendor-keyword-history, vendor-keywords, viewport, visibility, visual-media-group,

visual-model-intro, voice-char-props, volume-props, whitespace, white-space-model,

white-space-prop, width-constraints, width-layout, xml-tutorial, z-index

</pre>

<pre class=biblio>

{

"CSS20": {

"aliasOf": "CSS2-19980512"

}

}

</pre>

<style>

span.colorsquare { float:left; width:5em; height:3em; text-align:center; padding:1.2em 0 .8em }

span.colorname { font-weight:bold }

div.colordiagram { width:25em; height:20em; margin:1em auto; font-family:Verdana,sans-serif; font-size:12px }

div.diagramrow { height:5em }

blockquote.math {display: table}

blockquote.math p {display: table-row}

blockquote.math span {display: table-cell; padding-right: 0.3em}

blockquote.math span:first-child {text-align: right}

.egbidiwsaA,.egbidiwsbB,.egbidiwsaB,.egbidiwsbC

{ white-space:pre;font-size:80%;font-family:monospace; vertical-align:2px; margin:1px }

.egbidiwsaA { background:lime;padding:2px; }

.egbidiwsbB { border:2px solid blue }

.egbidiwsaB { background:yellow;border:2px dotted white }

.egbidiwsbC { border:2px dotted red }

pre.ascii-art {

display: table; /* shrinkwrap */

margin: 1em auto;

line-height: normal;

}

</style>

<h2 id="about"><span id="q1.0">About the CSS&nbsp;2.2 Specification</span></h2>

<h3 id="css2.2-v-css2">CSS&nbsp;2.2 vs CSS&nbsp;2</h3>

<p>The CSS community has gained significant experience with the CSS2

specification since it became a recommendation in 1998. Errors in the

CSS2 specification [[CSS20]] have subsequently been corrected in the first

revised edition [[CSS21]] in 2011, but new errata were necessary.

<p>While many of the issues will be addressed by the upcoming CSS3

specifications, the current state of affairs hinders the

implementation and interoperability of CSS2. The CSS&nbsp;2.2 specification

attempts to address this situation by:

<ul>

<li>Maintaining compatibility with those portions of CSS2 that are

widely accepted and implemented.

<li>Incorporating all published CSS2 errata.

<li>Where implementations overwhelmingly differ from the CSS2

specification, modifying the specification to be in accordance with

generally accepted practice.

<li>Removing CSS2 features which, by virtue of not having been

implemented, have been rejected by the CSS community. CSS&nbsp;2.2 aims to

reflect what CSS features are reasonably widely implemented for HTML

and XML languages in general (rather than <em>only</em> for a

particular XML language, or <em>only</em> for HTML).

<li>Removing CSS2 features that will be obsoleted by CSS3, thus

encouraging adoption of the proposed CSS3 features in their place.

<li>Adding a (very) small number of <a href="#new">new

property values,</a> when implementation experience has shown that

they are needed for implementing CSS2.

</ul>

<p>Thus, while it is not the case that a CSS2 style sheet is

necessarily forwards-compatible with CSS&nbsp;2.2, it is the case that a

style sheet restricting itself to CSS&nbsp;2.2 features is more likely to

find a compliant user agent today and to preserve forwards

compatibility in the future. While breaking forward compatibility is

not desirable, we believe the advantages to the revisions in CSS&nbsp;2.2

are worthwhile.

<p>CSS&nbsp;2.2 is derived from and is intended to replace

CSS&nbsp;2.1 and CSS2. Some parts of CSS2 are unchanged in

CSS&nbsp;2.2, some parts have been

altered, and some parts removed. The removed portions may be used in a

future CSS3 specification. Future specs should refer to CSS&nbsp;2.2

(unless they need features from CSS2 which have been dropped in

CSS&nbsp;2.2, and then they should only reference CSS2 for those

features, or preferably reference such feature(s) in the respective

CSS3 Module that includes those feature(s)).

<section class="non-normative">

<h3 id="reading">Reading the specification</h3>

<p>This section is non-normative.

<p>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 <a href="#conformance">conforming user

agents</a>.

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.

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

</section>

<section class="non-normative">

<h3 id="organization">How the specification is organized</h3>

<p>This section is non-normative.

<p>The specification is organized into the following sections:

<dl>

<dt><strong>Section 2: An introduction to CSS&nbsp;2</strong>

<dd>The introduction includes a brief tutorial on CSS&nbsp;2 and

a discussion of design principles behind CSS&nbsp;2.

<dt><strong>Sections 3 - 18: CSS&nbsp;2 reference manual.</strong>

<dd>The bulk of the reference manual consists of the CSS&nbsp;2 language

reference. This reference defines what may go into a CSS&nbsp;2 style sheet

(syntax, properties, property values) and how user agents must

interpret these style sheets in order to claim <a href="#conformance">conformance</a>.

<dt><strong>Appendixes:</strong>

<dd>Appendixes contain information about <a href="#html-stylesheet">a

sample style sheet for HTML 4</a>, <a href="#app-changes">changes

from CSS&nbsp;2.1</a>, <a href="#app-grammar">the grammar of CSS&nbsp;2</a>,

a list of normative and informative <a href="#references">references</a>,

and two indexes: one for

<a href="#property-index">properties</a> and one

<a href="#index">general index</a>.

</dl>

</section>

<h3 id="conventions">Conventions</h3>

<h4 id="doc-language">Document language elements

and attributes</h4>

<ul>

<li>CSS property and pseudo-class names are delimited

by single quotes.

<li>CSS values are delimited by single quotes.

<li>Document language attribute names are in lowercase letters

and delimited by double quotes.

</ul>

<h4 id="property-defs">CSS property definitions</h4>

<p>Each CSS property definition begins with a summary of key

information that resembles the following:</p>

<xmp class="propdef">

Name: property-name

Value: legal values &amp; 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

Computed Value: how to compute the computed value

</xmp>

<h5 id="value-defs">Value</h5>

<p>This part specifies the set of valid values for the property whose

name is 'property-name'. A property

value can have one or more components. Component value types are designated

in several ways:

<ol>

<li> <span id="syndata.html#keywords">keyword</span> values (e.g., auto,

disc, etc.)

<li> basic data types, which appear between "&lt;" and "&gt;" (e.g.,

<<length>>, <<percentage>>, etc.). In the electronic version

of the document, each instance of a basic data type links to its

definition.

<li> types that have the same range of values as a property bearing

the same name (e.g., &lt;'border-width'&gt;

&lt;'background-attachment'&gt;, etc.). In this case, the type name

is the property name (complete with quotes) between "&lt;" and "&gt;"

(e.g., &lt;'border-width'&gt;). Such a type does <strong>not</strong>

include the value ''inherit''. In the electronic version of the

document, each instance of this type of non-terminal links to the

corresponding property definition.

<li> non-terminals that do not share the same name as a property. In this

case, the non-terminal name appears between "&lt;" and "&gt;", as in

&lt;border-width&gt;. Notice the distinction between

&lt;border-width&gt; and &lt;'border-width'&gt;; 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.

</ol>

<p>Other words in these definitions are keywords that must appear

literally, without quotes (e.g., red). The slash (/) and the comma (<dfn data-dfn-type="grammar" data-export="" id="comb-comma">,</dfn>)

must also appear literally.

<p>Component values may be arranged into property values as follows:</p>

<ul>

<li>Several juxtaposed words mean that all of them must occur, in the

given order.

<li>A bar (<dfn data-dfn-type="grammar" data-export="" id="comb-one">|</dfn>) separates two or more alternatives:

exactly one of them must occur.

<li>A double bar (<dfn data-dfn-type="grammar" data-export="" id="comb-any">||</dfn>) separates

two or more options: one or more of them must occur, in any order.

<li>A double ampersand (<dfn data-dfn-type="grammar" data-export="" id="comb-all">&amp;&amp;</dfn>) separates two or more components, all of which

must occur, in any order.

<li>Brackets ([&nbsp;]) are for grouping.

</ul>

<p>Juxtaposition is stronger than the double ampersand, the double

ampersand is stronger than the double bar, and the double bar

is stronger than the bar. Thus, the following lines are equivalent:

<pre>

a b | c || d &amp;&amp; e f

[ a b ] | [ c || [ d &amp;&amp; [ e f ]]]

</pre>

<p> Every type, keyword, or bracketed group may be followed by one of

the following modifiers:</p>

<ul>

<li>

An asterisk (<dfn data-dfn-type="grammar" data-export="" id="mult-zero-plus">*</dfn>) indicates that the preceding type, word, or group

occurs zero or more times.

<li>

A plus (<dfn data-dfn-type="grammar" data-export="" id="mult-one-plus">+<a class="self-link" href="#mult-one-plus"></a></dfn>) indicates that the preceding type, word, or group

occurs one or more times.

<li>

A question mark (<dfn data-dfn-type="grammar" data-export="" id="mult-opt">?</dfn>) indicates that the preceding type, word, or

group is optional.

<li>

A pair of numbers in curly braces (<dfn data-dfn-type="grammar" data-export="" id="mult-num-range">{<var>A</var>,<var>B</var>}<a class="self-link" href="#mult-num-range"></a></dfn>) indicates that the

preceding type, word, or group occurs at least <var>A</var> and at most

<var>B</var> times.

</ul>

<p>The following examples illustrate different value types:

<blockquote><p>

<em>Value:</em> N | NW | NE<br>

<em>Value:</em> [ <<length>> | thick | thin ]{1,4}<br>

<em>Value:</em> [&lt;family-name&gt; , ]* &lt;family-name&gt;<br>

<em>Value:</em> <<uri>>? &lt;color&gt; [ / &lt;color&gt; ]?<br>

<em>Value:</em> <<uri>> || &lt;color&gt;<br>

<em>Value:</em> inset? &amp;&amp; [ <<length>>{2,4} &amp;&amp; &lt;color&gt;? ]

</blockquote>

<p>Component values are specified in terms of tokens, as described in <a href="#scanner">Appendix G.2</a>. As the grammar allows spaces

between tokens in the components of the <code>expr</code> production,

spaces may appear between tokens in property values.

<p class="note">Note: In many cases, spaces will in fact be

<em>required</em> between tokens in order to distinguish them from

each other. For example, the value ''1em2em'' would be parsed as a

single <code>DIMEN</code> token with the number ''1'' and the identifier

''em2em'', which is an invalid unit. In this case, a space would be

required before the ''2'' to get this parsed as the two lengths ''1em''

and ''2em''.

<h5 id="initial-value">Initial</h5>

<p>This part specifies the property's initial value. Please consult

the section on <a href="#assigning">the cascade</a> for information

about the interaction between style sheet-specified, inherited, and

initial property values.

<h5 id="applies-to">Applies to</h5>

<p>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, the 'clear' property only affects block-level elements.

<h5 id="inherited-prop">Inherited</h5>

<p>This part indicates whether the value of the property is inherited

from an ancestor element. Please consult the section on <a href="#assigning">the cascade</a> for information about the

interaction between style sheet-specified, inherited, and initial

property values.

<h5 id="percentage-wrt">Percentage values</h5>

<p>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 in its values.

<h5 id="media-applies">Media groups</h5>

<p>This part indicates the <a href="#media-groups">media

groups</a> to which the property applies. Information about media

groups is non-normative.

<h5 id="computed-defs">Computed value</h5>

<p>This part describes the computed value for the property. See the

section on <a href="#computed-value">computed values</a>

for how this definition is used.

<h4 id="shorthand">Shorthand properties</h4>

<p>Some properties are <dfn>shorthand properties</dfn>, meaning that they allow

authors to specify the values of several properties with a single

property.

<p>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.</p>

<p>When values are omitted from a shorthand form, each

"missing" property is assigned

its initial value (see the section on <a href="#assigning">the

cascade</a>).

<div class="example"><p>

The multiple style rules of this example:</p>

<pre class="lang-css">

h1 {

font-weight: bold;

font-size: 12pt;

line-height: 14pt;

font-family: Helvetica;

font-variant: normal;

font-style: normal;

}

</pre>

<p>may be rewritten with a single shorthand property:</p>

<pre class="lang-css">

h1 { font: bold 12pt/14pt Helvetica }

</pre>

<p>In this example, 'font-variant', and 'font-style'

take their initial values.</p>

</div>

<h4 id="notes-and-examples">Notes and examples</h4>

<p>All examples that illustrate illegal usage are clearly

marked as "ILLEGAL EXAMPLE".

<p>HTML examples lacking DOCTYPE declarations are SGML Text Entities

conforming to the HTML 4.01 Strict DTD [[!HTML401]]. Other HTML examples

conform to the DTDs given in the examples.

<p>All notes are informative only.

<p>Examples and notes are <a href="#defs">marked within

the source HTML</a> for the specification and CSS user agents will

render them specially.

<h4 id="images-and-longdesc">Images and long descriptions</h4>

<p>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]" after the image.

<p>Images and long descriptions are informative only.

<section class="non-normative">

<h3 id="acknowledgements">Acknowledgments</h3>

<p>This section is non-normative.

<p>CSS&nbsp;2.2 is based on CSS2&nbsp;(1998) and CSS&nbsp;2.1. See the <a href="https://www.w3.org/TR/2008/REC-CSS2-20080411/about.html#q15">acknowledgments section of CSS2</a> and the <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/about.html#acknowledgements">acknowledgments section of CSS&nbsp;2.1</a> for the people that

contributed to CSS2 and CSS&nbsp;2.1.

<p>We would like to thank the following people who, through their

input and feedback on the www-style mailing list, have helped us with

the creation of this specification:

<span class="vcard"><span class="fn">Andrew Clover</span></span>,

<span class="vcard"><span class="fn">Bernd Mielke</span></span>,

<span class="vcard"><span class="fn">C. Bottelier</span></span>,

<span class="vcard"><span class="fn">Christian Roth</span></span>,

<span class="vcard"><span class="fn">Christoph P&auml;per</span></span>,

<span class="vcard"><span class="fn">Claus F&auml;rber</span></span>,

<span class="vcard"><span class="fn">Coises</span></span>,

<span class="vcard"><span class="fn">Craig Saila</span></span>,

<span class="vcard"><span class="fn">Darren Ferguson</span></span>,

<span class="vcard"><span class="fn">Dylan Schiemann</span></span>,

<span class="vcard"><span class="fn">Etan Wexler</span></span>,

<span class="vcard"><span class="fn">George Lund</span></span>,

<span class="vcard"><span class="fn">James Craig</span></span>,

<span class="vcard"><span class="fn n"><span class="given-name">Jan</span>

<span class="additional-name">Eirik</span>

<span class="family-name">Olufsen</span></span></span>,

<span class="vcard"><span class="fn"><span class="given-name">Jan</span>

<span class="additional-name">Roland</span>

<span class="family-name">Eriksson</span></span></span>,

<span class="vcard"><span class="fn">Joris Huizer</span></span>,

<span class="vcard"><span class="fn">Joshua Prowse</span></span>,

<span class="vcard"><span class="fn">Kai Lahmann</span></span>,

<span class="vcard"><span class="fn">Kevin Smith</span></span>,

<span class="vcard"><span class="fn">Lachlan Cannon</span></span>,

<span class="vcard"><span class="fn">Lars Knoll</span></span>,

<span class="vcard"><span class="fn">Lauri Raittila</span></span>,

<span class="vcard"><span class="fn">Mark Gallagher</span></span>,

<span class="vcard"><span class="fn">Michael Day</span></span>,

<span class="vcard"><span class="fn">Peter Sheerin</span></span>,

<span class="vcard"><span class="fn n"><span class="given-name">Rijk</span>

<span class="family-name">van Geijtenbeek</span></span></span>,

<span class="vcard"><span class="fn">Robin Berjon</span></span>,

<span class="vcard"><span class="fn">Scott Montgomery</span></span>,

<span class="vcard"><span class="fn">Shelby Moore</span></span>,

<span class="vcard"><span class="fn">Stuart Ballard</span></span>,

<span class="vcard"><span class="fn">Tom Gilder</span></span>,

<span class="vcard"><span class="fn">Vadim Plessky</span></span>,

<span class="vcard"><span class="fn">Peter Moulder</span></span>,

<span class="vcard"><span class="fn">Anton Prowse</span></span>,

<span class="vcard"><span class="fn">G&eacute;rard Talbot</span></span>,

<span class="vcard"><span class="fn">Ingo Chao</span></span>,

<span class="vcard"><span class="fn">Bruno Fassino</span></span>,

<span class="vcard"><span class="fn">Justin Rogers</span></span>,

<span class="vcard"><span class="fn">Boris Zbarsky</span></span>,

<span class="vcard"><span class="fn">Garrett Smith</span></span>,

<span class="vcard"><span class="fn">Zack Weinberg</span></span>,

<span class="vcard"><span class="fn">Bjoern Hoehrmann</span></span>,

and the

<span class="vcard"><span class="fn org">Open eBook Publication Structure Working Group</span></span>

Editors. We would also like to thank

<span class="vcard"><span class="fn">Gary Schnabl</span></span>,

<span class="vcard"><span class="fn">Glenn Adams</span></span> and

<span class="vcard"><span class="fn">Susan Lesch</span></span>

who helped proofread earlier versions of this document.</p>

<p>In addition, we would like to extend special thanks to

<span class="vcard"><span class="fn">Elika J. Etemad</span></span>,

<span class="vcard"><span class="fn">Ada Chan</span></span> and

<span class="vcard"><span class="fn">Boris Zbarsky</span></span>

who have contributed significant time to CSS&nbsp;2.1, and to

<span class="vcard"><span class="fn">Kimberly Blessing</span></span>

for help with the editing.</p>

<p>Many thanks also to the following people for their help

with the test suite:

<span class="vcard"><span class="fn">Robert Stam</span></span>,

<span class="vcard"><span class="fn">Aharon Lanin</span></span>,

<span class="vcard"><span class="fn">Alan Gresley</span></span>,

<span class="vcard"><span class="fn">Alan Harder</span></span>,

<span class="vcard"><span class="fn">Alexander Dawson</span></span>,

<span class="vcard"><span class="fn">Arron Eicholz</span></span>,

<span class="vcard"><span class="fn">Bernd Mielke</span></span>,

<span class="vcard"><span class="fn">Bert Bos</span></span>,

<span class="vcard"><span class="fn">Boris Zbarsky</span></span>,

<span class="vcard"><span class="fn">Bruno Fassino</span></span>,

<span class="vcard"><span class="fn">Daniel Schattenkirchner</span></span>,

<span class="vcard"><span class="fn">David Hammond</span></span>,

<span class="vcard"><span class="fn">David Hyatt</span></span>,

<span class="vcard"><span class="fn">Eira Monstad</span></span>,

<span class="vcard"><span class="fn">Elika J. Etemad</span></span>,

<span class="vcard"><span class="fn">G&eacute;rard Talbot</span></span>,

<span class="vcard"><span class="fn">Gabriele Romanato</span></span>,

<span class="vcard"><span class="fn">Germain Garand</span></span>,

<span class="vcard"><span class="fn">Hilbrand Edskes</span></span>,

<span class="vcard"><span class="fn">Ian Hickson</span></span>,

<span class="vcard"><span class="fn">James Hopkins</span></span>,

<span class="vcard"><span class="fn">Justin Boss</span></span>,

<span class="vcard"><span class="fn">L. David Baron</span></span>,

<span class="vcard"><span class="fn">Lachlan Hunt</span></span>,

<span class="vcard"><span class="fn">Magne Andersson</span></span>,

<span class="vcard"><span class="fn">Marc Pacheco</span></span>,

<span class="vcard"><span class="fn">Mark McKenzie-Bell</span></span>,

<span class="vcard"><span class="fn">Matt Bradley</span></span>,

<span class="vcard"><span class="fn">Melinda Grant</span></span>,

<span class="vcard"><span class="fn">Michael Turnwall</span></span>,

<span class="vcard"><span class="fn">Ray Kiddy</span></span>,

<span class="vcard"><span class="fn">Richard Ishida</span></span>,

<span class="vcard"><span class="fn">Robert O'Callahan</span></span>,

<span class="vcard"><span class="fn">Simon Montagu</span></span>,

<span class="vcard"><span class="fn">Tom Clancy</span></span>,

<span class="vcard"><span class="fn">Vasil Dinkov</span></span>,

&mldr; and all the contributors to the CSS1 test suite.

<p>Working Group members active during the development of this

specification:

<span class="vcard"><span class="fn">C&eacute;sar Acebal</span> (<span class="org">Universidad de Oviedo</span>)</span>,

<span class="vcard"><span class="fn">Tab Atkins Jr.</span> (<span class="org">Google, Inc.</span>)</span>,

<span class="vcard"><span class="fn">L. David Baron</span> (<span class="org">Mozilla Foundation</span>)</span>,

<span class="vcard"><span class="fn">Bert Bos</span> (<span class="org">W3C/ERCIM</span>)</span>,

<span class="vcard"><span class="fn">Tantek &Ccedil;elik</span> (<span class="org">W3C Invited Experts</span>)</span>,

<span class="vcard"><span class="fn">Cathy Chan</span> (<span class="org">Nokia</span>)</span>,

<span class="vcard"><span class="fn">Giorgi Chavchanidze</span> (<span class="org">Opera Software</span>)</span>,

<span class="vcard"><span class="fn">John Daggett</span> (<span class="org">Mozilla Foundation</span>)</span>,

<span class="vcard"><span class="fn">Beth Dakin</span> (<span class="org">Apple, Inc.</span>)</span>,

<span class="vcard"><span class="fn">Arron Eicholz</span> (<span class="org">Microsoft Corp.</span>)</span>,

<span class="vcard"><span class="fn">Elika J. Etemad</span> (<span class="org">W3C Invited Experts</span>)</span>,

<span class="vcard"><span class="fn">Simon Fraser</span> (<span class="org">Apple, Inc.</span>)</span>,

<span class="vcard"><span class="fn">Sylvain Galineau</span> (<span class="org">Microsoft Corp.</span>)</span>,

<span class="vcard"><span class="fn">Daniel Glazman</span> (<span class="org">Disruptive Innovations</span>)</span>,

<span class="vcard"><span class="fn">Molly Holzschlag</span> (<span class="org">Opera Software</span>)</span>,

<span class="vcard"><span class="fn">David Hyatt</span> (<span class="org">Apple, Inc.</span>)</span>,

<span class="vcard"><span class="fn">Richard Ishida</span> (<span class="org">W3C/ERCIM</span>)</span>,

<span class="vcard"><span class="fn">John Jansen</span> (<span class="org">Microsoft Corp.</span>)</span>,

<span class="vcard"><span class="fn">Brad Kemper</span> (<span class="org">W3C Invited Experts</span>)</span>,

<span class="vcard"><span class="fn">H&aring;kon Wium Lie</span> (<span class="org">Opera Software</span>)</span>,

<span class="vcard"><span class="fn">Chris Lilley</span> (<span class="org">W3C/ERCIM</span>)</span>,

<span class="vcard"><span class="fn">Peter Linss</span> (<span class="org">HP</span>)</span>,

<span class="vcard"><span class="fn">Markus Mielke</span> (<span class="org">Microsoft Corp.</span>)</span>,

<span class="vcard"><span class="fn">Alex Mogilevsky</span> (<span class="org">Microsoft Corp.</span>)</span>,

<span class="vcard"><span class="fn">David Singer</span> (<span class="org">Apple Inc.</span>)</span>,

<span class="vcard"><span class="fn">Anne van Kesteren</span> (<span class="org">Opera Software</span>)</span>,

<span class="vcard"><span class="fn">Steve Zilles</span> (<span class="org">Adobe Systems Inc.</span>)</span>,

<span class="vcard"><span class="fn">Ian Hickson</span> (<span class="org">Google, Inc.</span>)</span>,

<span class="vcard"><span class="fn">Melinda Grant</span> (<span class="org">HP</span>)</span>,

<span class="vcard"><span class="fn">&Oslash;yvind Stenhaug</span> (<span class="org">Opera Software</span>)</span>,

and

<span class="vcard"><span class="fn">Paul Nelson</span> (<span class="org">Microsoft Corp.</span>)</span>.

</section>

<h2 id="intro"><span id="q2.0">Introduction to CSS&nbsp;2</span> </h2>

<section class="non-normative">

<h3 id="html-tutorial">A brief CSS&nbsp;2 tutorial for HTML</h3>

<p>This section is non-normative.

<p> 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 [[HTML401]]) and some basic desktop publishing terminology.

<p>We begin with a small HTML document:</p>

<pre class="lang-html example">

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;

&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;

&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt;Bach's home page&lt;/H1&gt;

&lt;P&gt;Johann Sebastian Bach was a prolific composer.

&lt;/BODY&gt;

&lt;/HTML&gt;

</pre>

<p>To set the text color of the H1 elements to red, you can write the

following CSS rules:</p>

<pre class="example lang-css">

h1 { color: red }

</pre>

<p>A CSS rule consists of two main parts: <a href="#selector">selector</a> (''h1'') and declaration

('color:&nbsp;red'). In HTML, element names are case-insensitive so

''h1'' works just as well as ''H1''. The declaration has two parts:

property name ('color') and property value (''red''). 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), the rule will determine the final presentation of the

document.

<p> The HTML 4 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:</p>

<pre class="lang-html example">

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;

&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;

&lt;STYLE type="text/css"&gt;

h1 { color: red }

&lt;/STYLE&gt;

&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt;Bach's home page&lt;/H1&gt;

&lt;P&gt;Johann Sebastian Bach was a prolific composer.

&lt;/BODY&gt;

&lt;/HTML&gt;

</pre>

<p> 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:</p>

<pre class="lang-html example">

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;

&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;

&lt;LINK rel="stylesheet" href="bach.css" type="text/css"&gt;

&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt;Bach's home page&lt;/H1&gt;

&lt;P&gt;Johann Sebastian Bach was a prolific composer.

&lt;/BODY&gt;

&lt;/HTML&gt;

</pre>

<p>The LINK element specifies:</p>

<ul>

<li>the type of link: to a "stylesheet".

<li>the location of the style sheet via the "href" attribute.

<li>the type of style sheet being linked: "text/css".

</ul>

<p>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:

<pre class="lang-html example">

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;

&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;

&lt;STYLE type="text/css"&gt;

body { color: black; background: white }

h1 { color: red; background: white }

&lt;/STYLE&gt;

&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt;Bach's home page&lt;/H1&gt;

&lt;P&gt;Johann Sebastian Bach was a prolific composer.

&lt;/BODY&gt;

&lt;/HTML&gt;

</pre>

<p>The style sheet now contains four rules: the first two set the

color and background of the BODY element (it's a good idea to set the

text color and background color together), while the last two

set the color and the background of the H1 element. Since no color

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.

<p>CSS&nbsp;2 has more than 90 properties, including 'color'. Let's look at some of the

others:

<pre class="example">

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;

&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;

&lt;STYLE type="text/css"&gt;

body {

font-family: "Gill Sans", sans-serif;

font-size: 12pt;

margin: 3em;

}

&lt;/STYLE&gt;

&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt;Bach's home page&lt;/H1&gt;

&lt;P&gt;Johann Sebastian Bach was a prolific composer.

&lt;/BODY&gt;

&lt;/HTML&gt;

</pre>

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

<p>The first declaration on the BODY element sets the font family to

"Gill Sans". If that font is not 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.

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

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

</section>

<section class="non-normative">

<h3 id="xml-tutorial">A brief CSS&nbsp;2 tutorial for XML</h3>

<p>This section is non-normative.

<p>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 do not know how to

display.

<p>Here is a simple XML fragment:

<pre class="lang-xml example">

&lt;ARTICLE&gt;

&lt;HEADLINE&gt;Fredrick the Great meets Bach&lt;/HEADLINE&gt;

&lt;AUTHOR&gt;Johann Nikolaus Forkel&lt;/AUTHOR&gt;

&lt;PARA&gt;

One evening, just as he was getting his

&lt;INSTRUMENT&gt;flute&lt;/INSTRUMENT&gt; ready and his

musicians were assembled, an officer brought him a list of

the strangers who had arrived.

&lt;/PARA&gt;

&lt;/ARTICLE&gt;

</pre>

<p>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).

<pre class="example lang-css">

INSTRUMENT { display: inline }

ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

</pre>

<p>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. Element names in XML are

case-sensitive, so a selector written in lowercase (e.g., ''instrument'')

is different from uppercase (e.g., ''INSTRUMENT'').

<p>One way of linking a style sheet to an XML document is to use

a processing instruction:

<pre class="lang-xml example">

&lt;?xml-stylesheet type="text/css" href="bach.css"?&gt;

&lt;ARTICLE&gt;

&lt;HEADLINE&gt;Fredrick the Great meets Bach&lt;/HEADLINE&gt;

&lt;AUTHOR&gt;Johann Nikolaus Forkel&lt;/AUTHOR&gt;

&lt;PARA&gt;

One evening, just as he was getting his

&lt;INSTRUMENT&gt;flute&lt;/INSTRUMENT&gt; ready and his

musicians were assembled, an officer brought him a list of

the strangers who had arrived.

&lt;/PARA&gt;

&lt;/ARTICLE&gt;

</pre>

<p>A visual user agent could format the above example as:

<div class="figure">

<p><img src="images/bach1.png" alt="Example rendering" id="img-bach1">

</div>

<p>Notice that the word "flute" remains within the paragraph since it

is the content of the inline element INSTRUMENT.

<p>Still, the text is not formatted the way you would expect. For

example, the headline font size should be larger than then the rest of

the text, and you may want to display the author's name in italic:</p>

<pre class="example lang-css">

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 }

</pre>

<p>A visual user agent could format the above example as:

<div class="figure">

<p><img src="images/bach2.png" alt="Example rendering" id="img-bach2">

</div>

<p>Adding more rules to the style sheet will allow you to further

describe the presentation of the document.

</section>

<h3 id="processing-model">The CSS&nbsp;2 processing model</h3>

<p>This section up to but not including its subsections is

non-normative.

<div class="non-normative">

<p>This section presents one possible model of how user

agents that support CSS work. This is only a conceptual model; real

implementations may vary.

<p>In this model, a user agent processes a source

by going through the following steps:</p>

<ol>

<li>Parse the source document and create a <a href="#doctree">document tree</a>.</li>

<li>Identify the target <a href="#media">media type</a>.

<li>Retrieve all style sheets associated with the document that are

specified for the target <a href="#media">media type</a>.

<li>Annotate every element of the document tree by assigning a single

value to every <a href="#properties">property</a> that is

applicable to the target <a href="#media">media type</a>.

Properties are assigned values according to the mechanisms described

in the section on <a href="#assigning">cascading and

inheritance</a>.

<p>Part of the calculation of values depends on the formatting

algorithm appropriate for the target <a href="#media">media

type</a>. For example, if the target medium is the screen, user agents

apply the <a href="#visuren">visual formatting model</a>.

<li>From the annotated document tree, generate a

<dfn id="formatting-structure">

formatting