目次
ユーザーエージェントが文書を解析し、文書ツリーを構築した後、ツリー内のすべての要素に対して、対象のメディアタイプに適用されるすべてのプロパティに値を割り当てる必要があります。
プロパティの最終的な値は、4段階の計算の結果です。この値は、指定（「指定値」）によって決定され、継承に使用される値（「計算値」）に解決され、必要に応じて絶対値（「使用値」）に変換され、最後にローカル環境の制限に基づいて変換されます（「実際の値」）。
ユーザーエージェントは、以下のメカニズム（優先順位順）に基づいて各プロパティに指定値を割り当てる必要があります:
指定値はカスケード中に計算値に解決されます。例えば、URIは絶対URIに変換され、'em'や'ex'単位はピクセルや絶対長さに計算されます。値の計算には文書のレンダリングを必要としません。
絶対URIに解決できないURIの計算値は、指定値となります。
プロパティの計算値は、そのプロパティの定義の計算値ラインで指定された方法で決定されます。指定値が 'inherit' の場合の計算値の定義については、継承のセクションを参照してください。
プロパティが適用されない場合でも、計算値は存在します（'適用対象'ラインで定義されています）。ただし、一部のプロパティでは、プロパティがその要素に適用されるかどうかに応じて計算値が異なる場合があります。
計算値は文書をフォーマットすることなく可能な限り処理されます。ただし、一部の値は文書のレイアウト中にのみ決定できます。例えば、要素の幅が包含ブロックの一定割合に設定されている場合、包含ブロックの幅が決定されるまで幅を決定できません。使用値は、計算値を取得し、残りの依存関係を絶対値に解決した結果です。
使用値は原則としてレンダリングに使用される値ですが、ユーザーエージェントは特定の環境でその値を利用できない場合があります。例えば、ユーザーエージェントが整数ピクセル幅でのみ境界線を描画できる場合、計算幅を近似する必要があるか、またはフルカラーではなく白黒の色合いのみを使用する必要がある場合があります。実際の値は、近似が適用された後の使用値です。
一部の値は文書ツリー内の要素の子孫に継承されます。前述の通りです。各プロパティは、それが継承可能かどうかを定義しています。
H1要素の中に強調要素（EM）があると仮定します:
<H1>見出し <EM>は</EM> 重要です！</H1>
EM要素に色が割り当てられていない場合、強調された "は" は親要素の色を継承します。したがって、H1が青色の場合、EM要素も青色になります。
継承が発生するとき、要素は計算値を継承します。親要素の計算値は、子要素の指定値および計算値の両方になります。
次のスタイルシートを考えます:
body { font-size: 10pt }
h1 { font-size: 130% }
この文書フラグメントの場合:
<BODY> <H1>大きな <EM>見出し</EM></H1> </BODY>
H1要素の'font-size'プロパティは計算値として'13pt'（130% × 10pt、親の値）を持ちます。'font-size'の計算値は継承されるため、EM要素も計算値として'13pt'を持ちます。ユーザーエージェントに13ptのフォントがない場合、H1とEMの'font-size'の実際の値は例えば'12pt'になる可能性があります。
継承は文書ツリーに従い、匿名ボックスによって中断されることはありません。
各プロパティには 'inherit' というカスケード値を持つことができます。この値は、特定の要素について、そのプロパティが親要素の計算値を指定値として取ることを意味します。'inherit' 値は値の継承を強制するために使用でき、通常は継承されないプロパティにも使用できます。
ルート要素に 'inherit' 値が設定されている場合、プロパティには初期値が割り当てられます。
以下の例では、'color'および'background'プロパティがBODY要素に設定されています。他のすべての要素では、'color' 値は継承され、背景は透明になります。これらのルールがユーザーのスタイルシートの一部である場合、文書全体で白い背景に黒いテキストが強制されます。
body {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent !important;
}
'@import'ルールは、他のスタイルシートからスタイルルールをインポートするために使用されます。CSS 2.2では、@importルールは他のすべてのルール（存在する場合は@charsetルールを除く）に先行する必要があります。@importルールを無視する必要がある場合については、解析のセクションを参照してください。'@import'キーワードの後には、インクルードするスタイルシートのURIが続かなければなりません。文字列も許可されており、それはurl(...)で囲まれているかのように解釈されます。
以下の行は意味的に等しく、'@import'の2つの構文（"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"ルールの場合、優先順位が逆になります。すべてのユーザーおよび作成者のルールは、UAのデフォルトスタイルシート内のルールよりも重みがあります。
要素/プロパティの組み合わせの値を見つけるために、ユーザーエージェントは以下のソート順を適用する必要があります:
個々の宣言に設定された"!important"を除いて、この戦略では作成者のスタイルシートが読者のものより高い重みを持ちます。ユーザーエージェントは、特定の作成者スタイルシートの影響をオフにする機能を提供する必要があります（例えば、プルダウンメニューを通じて）。UAAG 1.0 チェックポイント4.14への準拠がこの条件を満たします[UAAG10]。
CSSは、作成者とユーザーのスタイルシート間のバランスを取ろうとします。デフォルトでは、作成者のスタイルシート内のルールはユーザーのスタイルシート内のルールを上書きします（カスケードルール3を参照）。
しかし、バランスを取るために、"!important"宣言（区切りトークン"!"およびキーワード"important"が宣言に続く）は通常の宣言よりも優先されます。作成者とユーザーのスタイルシートの両方が"!important"宣言を含むことができ、ユーザーの"!important"ルールは作成者の"!important"ルールを上書きします。このCSS機能により、特別な要件（大きなフォント、色の組み合わせなど）を持つユーザーがプレゼンテーションを制御することで、文書のアクセシビリティが向上します。
ショートハンドプロパティ（例: 'background'）を"!important"として宣言することは、そのすべてのサブプロパティを"!important"として宣言することと同等です。
次の例では、ユーザーのスタイルシートの最初のルールが"!important"宣言を含んでおり、作成者のスタイルシート内の対応する宣言を上書きします。2番目の宣言も"!important"としてマークされているため、勝ちます。しかし、3番目のルールは"!important"ではないため、作成者のスタイルシート内の2番目のルールに負けます（これはショートハンドプロパティにスタイルを設定しています）。また、作成者の3番目のルールは、2番目のルールが"!important"であるため負けます。これにより、"!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]"の形式のセレクターは、ソース文書のDTDでid属性が"ID"として定義されている場合でも、属性セレクターとしてカウントされます（a=0, b=0, c=1, d=0）。
4つの数値a-b-c-dを連結することで（大きな基数を持つ数値システムで）、特異性が決まります。
一部の例:
* {} /* 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"属性内の宣言は、より高い特異性を持つため、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文書内の'font'要素のcolor属性を持つものの色を上書きします。ただし、HTML文書内のcolor属性を持つ'font'要素の色には影響しません:
b { font-weight: normal; }
font[color] { color: orange; }
しかし、次の例では、すべての文書内のfont要素の色を上書きします:
font[color] { color: orange ! important; }