目次
ユーザーエージェントは文書を解析し、文書ツリーを構築した時点で、ツリーのすべての要素に対して、対象のメディアタイプに適用されるすべてのプロパティに値を割り当てなければならない。
プロパティの最終値は、4段階の計算結果である。値は仕様を通じて決定され（"指定値"）、その後、継承に使用される値（"算出値"）に解決される。さらに、必要に応じて絶対値に変換され（"使用値"）、そして最終的にローカル環境の制限に応じて変換される（"実効値"）。
ユーザーエージェントは、最初に以下の手順（優先順）に基づいて各プロパティに指定値を割り当てなければならない：
指定値は、カスケード処理時に算出値に解決される。たとえば、URIは絶対URIが得られ、'em'や'ex'単位はピクセルまたは絶対長さに計算される。算出値は、ユーザーエージェントに文書のレンダリングを要求しない。
ユーザーエージェントが絶対URIに解決できないURIの算出値は、指定値である。
プロパティの算出値は、プロパティの定義における算出値の行により規定されるものとして決定される。指定値が'inherit'である算出値の定義については、継承の節を参照のこと。
算出値は、'適用対象'の行で定義され、プロパティが適用されない場合でも存在する。ただし、一部のプロパティは、プロパティが要素に適用されるかどうかに依存する要素のプロパティの算出値を定義してもよい。
算出値は、できる限り文書を整形せずに処理される。しかし、一部の値は、文書が配置される場合にのみ決定できる。たとえば、ある要素の幅が要素の包含ブロックの特定の割合になるように設定される場合、包含ブロックの幅が決定されるまで幅を決定することができない。使用値とは、算出値を取り、残りの依存関係を解決した絶対値の結果である。
使用値は、原則としてレンダリングに使用される値であるが、ユーザーエージェントは、与えられた環境で値を利用できない場合がある。たとえば、ユーザーエージェントは、整数ピクセル幅のボーダーをレンダリングするため、計算された幅を近似する必要があってもよい。またユーザーエージェントは、白と黒の代わりにフルカラーを使用するように強制されてもよい。実効値は、使用値にすべての近似を適用した後の値である。
上記のように一部の値は、文書ツリー内の要素の子によって継承される。継承の有無は、各プロパティが定義する。
内部に強調要素（EM）をもつH1要素があるとする：
<H1>The headline <EM>is</EM> important!</H1>
EM要素に色が割り当てられていない場合、強調された"is"は、親要素の色を継承する。よって、H1が青色を持つ場合、EM要素も同様に青になる。
継承が発生する際に、要素は算出値を継承する。親要素からの算出値は、指定値と子の算出値の両方となる。
たとえば、以下のスタイルシートを与えられ：
body { font-size: 10pt }
h1 { font-size: 130% }
次の文書断片があるとすると：
<BODY> <H1>A <EM>large</EM> heading</H1> </BODY>
H1要素の'font-size'プロパティは、算出値'13pt'（親の値10ptの130%）を持つ。'font-size'の算出値が継承されるため、EM要素も同様に算出値'13pt'を持つ。ユーザーエージェントが13ptのフォントを入手できない場合、H1およびEMの'font-size'の実効値は、たとえば、'12pt'となるかもしれない。
継承は文書ツリーに従い、匿名ボックスによって横取りされないことに注意する。
各プロパティはまた、カスケードされた値'inherit'を持ってもよい。この値は、与えられた要素に対して、プロパティが要素の親の算出値を指定値として取ることを意味する。'inherit'値は、値の継承を強制するために使用でき、正常に継承されないプロパティにも使用することができる。
'inherit'値がルート要素に設定される場合、プロパティは初期値が代入される。
以下の例において、BODY要素に'color'および'background'プロパティが設定されている。他のすべての要素に'color'値は継承され、背景は透過となる。この規則がユーザースタイルシートの一部である場合、文書全体に白の背景色と黒の前景色が適用される。
body {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent !important;
}
'@import'規則は、ユーザーが他のスタイルシートからスタイル規則の取り込みを可能にする。CSS 2.2において、あらゆる@import規則は、他のすべての規則の前に置かなければならない（@charset規則が存在する場合を除く）。ユーザーエージェントが@import規則を無視しなければならない条件については、構文解析の節を参照のこと。'@import'キーワードは、組み込むスタイルシートのURIを続けなければならない。文字列も許容される。文字列は前後にurl(...)を持つかのように解釈される。
次の行は意味上等価であり、2つの'@import'構文（裸の文字列と"url()"）を示している：
@import "mystyle.css";
@import url("mystyle.css");
ユーザーエージェントがサポートしないメディアタイプのリソースの取得を回避するよう、著者は、メディア依存な@import規則を指定してもよい。この条件付き取り込みは、URIの後にコンマ区切りのメディアタイプを指定する。
次の規則は、メディア依存な@import規則を作成する方法を指示する：
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
メディアタイプがない場合、無条件で取り込みがされる。これはメディアに対して'all'を指定するのと同じ効果を持つ。対象メディアがメディアリストとマッチする場合のみ、取り込みは有効である。
メディアリストにおける項目の1つが対象メディアであるまたは'all'の場合、対象メディアはマッチする。
メディアクエリはメディアリストの構文とマッチングの定義を拡張することに注意する。[MEDIAQ]
同じスタイルシートが、複数の場所で文書に取り込まれるまたはリンクされる場合、ユーザーエージェントは、各リンクをあたかも別のスタイルシートにリンクされているように処理（またはそうするかのように機能）しなければならない。
スタイルシートは、著者、ユーザー、およびユーザーエージェントの3つの異なる起源を持ってもよい。
ユーザーはデフォルトスタイルシートに影響を与えるシステム設定（たとえば、システム色）を変更してもよいことに注意する。それにもかかわらず、一部のユーザーエージェントの実装は、デフォルトスタイルシートの値を変更することができない。
これら3つの起源を持つスタイルシートは、範囲内で重複し、カスケードにしたがって相互に作用する。
CSSカスケードは、各スタイル規則に重みを割り当てる。複数の規則が適用される場合、最大の重みを持つ規則が優先される。
デフォルトで、著者のスタイルシートの規則は、ユーザースタイルシートの規則よりも重みを持つ。しかし、"!important"規則により、優先順位は逆になる。すべてのユーザーおよび著者の規則は、ユーザーエージェントのデフォルトスタイルシートの規則よりも重みを持つ。
要素とプロパティの組み合わせの値を見つけるために、ユーザーエージェントは、以下のソート順を適用しなければならない：
個々の宣言上の"!important"設定は別にして、この戦略は、ユーザーよりも著者のスタイルシートにより大きな重みを与える。ユーザーエージェントは、たとえばプルダウンメニューを通してなど、特定の著者スタイルシートの影響を抑えためのる機能をユーザーに付与しなければならない。UAAG 1.0のチェックポイント4.14への適合性は、この条件を満たす[UAAG10]。
CSSは、著者とユーザースタイルシート間のパワーバランスを作成しようとする。デフォルトで、著者スタイルシートの規則は、ユーザースタイルシートの規則を上書きする（カスケード規則3を参照）。
しかし、バランスのために（宣言の後に区切りトークン"!"とキーワード"important"が続く）"!important"宣言は通常の宣言よりも優先される。著者スタイルシートとユーザースタイルシートのどちらも"!important"宣言を含んでもよく、ユーザー"!important"規則は、著者"!important"規則を上書きする。このCSSの機能は、見栄えを支配する特殊な要件（大きなフォント、色の組み合わせ、など）とともにユーザーに与えることにより、文書のアクセシビリティーを向上させる。
略式プロパティを"!important"宣言すること（たとえば、'background'）は、そのサブプロパティのすべてを"!important"と宣言することと等価である。
次の例で、ユーザースタイルシートの最初の規則は"!important"宣言を含んでおり、著者スタイルシート内の対応する宣言を上書きする。2番目の宣言も、"!important"とマークされたものを優先する。しかし、ユーザースタイルシートの3番目の規則は"!important"ではないので、著者スタイルシートの2番目の規則（略式プロパティでスタイル設定するために起こる）に上書きされる。また、著者の3番目の規則は、2番目の規則に"!important"があるので、著者の2番目の規則に上書きされる。これは "!important" 宣言が、著者スタイルシート内でも機能することを示している。
/* ユーザースタイルシートから */
p { text-indent: 1em !important }
p { font-style: italic !important }
p { font-size: 18pt }
/* 著者スタイルシートから */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }
セレクターの詳細度は、次のように計算される。
詳細度は、セレクターの形式のみに基づく。具体的に、セレクター形式"[ID=P33]"のセレクターは、たとえid属性が"ID"としてソース文書のDTD内で定義されていても、属性セレクター（a=0、b=0、c=1、d=0）としてカウントされる。
（十分大きな基数の記進法で）abcdの4つの数値を連結すると、詳細度が得られる。
いくつかの例を挙げる：
* {} /* a=0 b=0 c=0 d=0 -> 詳細度 = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> 詳細度 = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> 詳細度 = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> 詳細度 = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> 詳細度 = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 詳細度 = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 詳細度 = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> 詳細度 = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> 詳細度 = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> 詳細度 = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
上記の例で、P要素の色は緑色となる。より高い詳細度を持っているので、"style"属性の宣言は、カスケーディング規則3のためにSTYLE要素内のものを上書きする。
ユーザーエージェントは、HTMLソース文書における見栄え属性を尊重してもよい。その場合、これらの属性は0に等しい詳細度と対応するCSS規則に変換され、それらは著者スタイルシートの先頭に挿入されたかのように扱われる。したがって、後続のスタイルシート規則によって上書きされてもよい。移行段階において、この方針はスタイル属性のスタイルシートとの共存が容易となる。
HTMLに対して、次のリストにない任意の属性のための見栄えを考慮すべきである：abbr, accept-charset, accept, accesskey, action, alt, archive, axis, charset, checked, cite, class, classid, code, codebase, codetype, colspan, coords, data, datetime, declare, defer, dir, disabled, enctype, for, headers, href, hreflang, http-equiv, id, ismap, label, lang, language, longdesc, maxlength, media, method, multiple, name, nohref, object, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, onunload, profile, prompt, readonly, rel, rev, rowspan, scheme, scope, selected, shape, span, src, standby, start, style, summary, title, type （LI、OLとUL要素を除く）, usemap, value, valuetype, version.
他の言語の場合、すべての文書言語ベースのスタイルは、対応するCSSに変換されなければならず、ユーザーエージェントレベルでカスケードを入力するか、HTMLの見栄えのヒントと同様に、著者スタイルシートの先頭に置かれるような0の詳細度をもつ著者レベルの規則のいずれかとして扱われなければならない。
次のユーザースタイルシートは、すべての文書で'B'要素のフォントの太さ、およびXMLドキュメント内のcolor属性を持つ'font'要素の色を上書きする。これは、HTML文書内のcolor属性を持つ任意の'font'要素の色には影響を与えない：
b { font-weight: normal; }
font[color] { color: orange; }
しかし、以下はすべての文書のfont要素の色を上書きする。
font[color] { color: orange ! important; }