目次
この節は非規範的である。
このチュートリアルでは、単純なスタイルシートの設計がいかに容易であるかを示す。このチュートリアルに関しては、わずかなHTML[HTML4]と基本的なDTP用語についての知識が必要である。
小さなHTML文章から始める:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
H1要素のテキストの色を赤に設定するには、次のCSS規則を記述するとよい:
h1 { color: red }
CSS規則は、セレクタ（'h1'）および宣言（'color:red'）という2つの主要部分から構成される。HTMLでは、要素名は大文字と小文字を区別しないため、'h1'は'H1'とまったく同じ働きをする。宣言は2つの要素、プロパティ名（'color'）とプロパティ値（'red'）を持つ。上の例は、HTML文章のレンダリングに必要なプロパティのたった1つに対して制御を試したにすぎないとはいえ、それだけでスタイルシートだと言える。他のスタイルシートと組み合わせることで（CSSの基本的な機能の1つは、スタイルシートを組み合わせることにある）、最終的な見栄えが決定される。
HTML 4仕様は、スタイルシート規則をHTML文章内に、または外部スタイルシートを経由して指定する方法を定義する。スタイルシートを文章に埋め込むには、STYLE要素を使用する:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
h1 { color: red }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
柔軟性を最大限に高めるために、文書作成者は外部スタイルシートを指定することを推奨する。外部スタイルシートは、HTML文書ソースを修正することなくスタイルシートを変更することができ、また複数の文章間でスタイルシートを共有することができる。外部スタイルシートにリンクするには、LINK要素を使用する:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
LINK要素は次の事項を指定する:
スタイルシートと構造化マークアップの間の密接な関係を示すために、このチュートリアルではSTYLE要素を使用しつづける。より多くの色を追加してみよう:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
body { color: black; background: white }
h1 { color: red; background: white }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
今、スタイルシートは4つの規則を含んでいる: 最初の2つは、BODY要素の色と背景を設定する（テキストの色と背景色を同時に設定することはよいアイデアといえる）と同時に、最後の2つはH1要素の色と背景を設定している。P要素には色が設定されていないので、親要素、つまりBODY要素から色を継承することになる。H1要素もまたBODY要素の子要素であるが、2番目の規則が継承値を上書きする。CSSでは、異なる値の間でこのような衝突がたびたびあるが、本仕様はそれらを解決する方法を説明する。
CSS 2.1は、'color'を含む90以上のプロパティがある。その他のプロパティも見てみよう:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
body {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
最初に気づくことは、複数の宣言が波括弧で囲まれたブロック内でグループ化され（{...}）、セミコロンで区切られていることだろう。しかし、最後の宣言はセミコロンがついてもよい。
BODY要素の最初の宣言は、"Gill Sans"フォントファミリを設定している。このフォントが利用できない場合、ユーザーエージェント（たいてい"ブラウザ"と呼ばれる）は'sans-serif'フォントファミリを使用するだろう。これは5つある総称フォントファミリのうちの1つで、すべてのユーザーエージェントが認識するものである。BODY要素の子要素は、'font-family'プロパティの値を継承する。
2番目の宣言は、BODY要素のフォントサイズを12ポイントに設定している。"ポイント"という単位は、一般にフォントサイズやその他の長さの値を示すために、印刷をもとにした組版において用いられる。 これは絶対単位の例であり、絶対単位とは環境に依存しない尺度である。
3番目の宣言は相対単位を用いている。これは、環境に依存する単位である。"em"という単位は要素のフォントサイズを参照する。この場合、BODY要素の周囲のマージンはフォントサイズの3倍幅のある数値となる。
この節は非規範的である。
CSSは、たとえば拡張可能なマークアップ言語[XML10]のアプリケーションといった、いかなる構造化文章形式でも利用できる。実際、著者はユーザーエージェントが表示する方法を知らないXML要素をマークアップすることができるので、XMLはHTML以上にスタイルシートに依存する。
ここに簡単なXMLの断片がある:
<ARTICLE>
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was getting his
<INSTRUMENT>flute</INSTRUMENT> ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
</PARA>
</ARTICLE>
この断片を文章に適したスタイルで表示させるために、要素がインラインレベル（すなわち改行をさせない）であるか、ブロックレベル（すなわち改行をさせる）であるかを最初に宣言しなければならない。
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
最初の規則でINSTRUMENTがインラインであると宣言し、コンマで区切られたセレクタの羅列である2番目の規則は、他のすべての要素がブロックレベルであると宣言している。XMLでの要素名は大文字と小文字を区別する。そのため、小文字で書かれたセレクタ（たとえば、'instrument'）と大文字で書かれたもの（たとえば、'INSTRUMENT'）は異なるものとなる。
XML文章にスタイルシートをリンクさせる1つの方法は、処理命令を使用することである:
<?xml version="1.0" encoding="UTF-8"?>
<ARTICLE>
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was getting his
<INSTRUMENT>flute</INSTRUMENT> ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
</PARA>
</ARTICLE>
視覚ユーザーエージェントは上記の例を次のように書式を設定する:
単語"flute"は段落内にとどまっていることに注目する。これは、インライン要素INSTRUMENTの内容のためである。
まだ、テキストは意図したとおりには整形されてない。たとえば、見出しは残りのテキストよりも大きなフォントサイズにすべきだろうし、著者の名前をイタリック体で表示させたいだろう:
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 }
視覚ユーザーエージェントは上記の例を次のように書式を設定する:
スタイルシートにより多くの規則を追加することで、文章の表現をより向上させることができるだろう。
この節は小節も含めて非規範的である。
この節は、ユーザーエージェントがCSSをサポートする動作方法として可能な1つのモデルを提示する。これは抽象的なモデルにすぎない。実際の実装は異なってよい。
このモデルでは、ユーザーエージェントは以下の操作によってソースを処理する:
値の計算の一部は、ターゲットメディアタイプに適切な整形アルゴリズムに依存する。たとえば、ターゲットメディアが画面であれば、ユーザエージェントは視覚整形モデルを適用する。
CSSユーザーエージェントはこの段階で文章ツリーを改変しないことに注意されたい。とくに、スタイルシートに起因する内容生成は、文章言語プロセッサにフィードバックされることはない（たとえば、再解析のために）。
すべてのメディアに対して、用語キャンバスは"整形構造がレンダリングされる空間"を表す。キャンバスは各次元について無限空間であるが、一般的にレンダリングは、ターゲットメディアによって設置されたキャンバスの有限範囲で行われる。たとえば、画面表示をするユーザーエージェントは、一般的に最小幅を設け、ビューポートの寸法に基づく初期幅を選択する。ページ出力をするユーザーエージェントは一般的に幅と高さに制限を設ける。聴覚ユーザーエージェントは音声空間に関する制限がされても、時間の制限はされないだろう。
CSS 2.1セレクタおよびプロパティは、文章またはユーザーエージェントの以下の部分の参照をスタイルシートに割り当てる:
この節は非規範的である。
以前のCSS2およびCSS1と同様に、CSS2.1は一連の設計原則に基づいている:
前方および後方互換性。CSS 2.1のユーザーエージェントはスタイルシートを解釈できるだろう。CSS1ユーザーエージェントはCSS 2.1スタイルシートを読み、解釈できない部分は破棄するだろう。また、CSSをサポートしないユーザーエージェントでも、スタイルの拡張された文章を表示できるだろう。もちろん、CSSによって可能となったスタイルの機能強化はレンダリングされないが、すべての内容は表示されるだろう。
構造化文章の補完。スタイルシートは、マークアップテキストにスタイル情報を与えることで、構造化文章（たとえば、HTMLやXMLアプリケーション）を補完する。マークアップに影響を与えることなくスタイルシートを容易に変更できるはずである。
ベンダー、プラットフォーム、デバイスからの独立。スタイルシートは、ベンダー、プラットフォーム、デバイスからの独立を保つ文章を可能にする。スタイルシート自身もまたベンダーやプラットフォームから独立しているが、CSS 2.1はある種のデバイス（たとえば、プリンタ）を対象にしたスタイルシートを認めている。
保全性。文書からスタイルシートを指定することによって、ウェブマスターがサイトのメンテナンスを簡素化し、サイトのいたるところで一貫した外観を保持する。たとえば、背景色を変更する場合、ただ1つのファイルを変更するだけでよい。
容易性。CSSは簡潔な人間が読み書き可能なスタイル言語である。CSSプロパティは可能な限り最大の範囲で相互に独立するよう保持され、通常、ある効果を達成する唯一の方法が存在する。
ネットワークの性能。CSSは内容を表示するための簡素なエンコーディングを提供する。レンダリング効果を得るためによく用いられる画像や音声ファイルと比べて、スタイルシートは内容量を最も減少させる。また、より少ないネットワーク接続は、さらなるネットワークパフォーマンスの増加をもたらす。
柔軟性。CSSはさまざまな方法で内容に適用できる。キーポイントとなる特徴は、（ユーザーエージェントの）デフォルトスタイルシート、ユーザースタイルシート、リンクされたスタイルシート、文章のヘッダ、文章の本体にある要素の属性、といった方法で指定されたスタイル情報をカスケードする機能である。
豊かさ。レンダリング効果の豊富な設定を著者に提供することで、表現メディアとしてのWebの豊かさが向上する。デザイナーは、DTPやスライドショー・アプリケーションに共通して見られるような機能性を待ち望んでいる。要求された一部のレンダリング効果はデバイスの独立性と矛盾するが、CSS 2.1はデザイナーの要求を容認するのに大きな役割を果たす。
他言語との結びつき。本仕様に記述された一連のCSSプロパティは、視覚および聴覚表現のための一貫性のある整形モデルを構成する。この整形モデルはCSS言語を通してアクセスされるが、他の言語に結びつけることも可能である。たとえば、JavaScriptプログラムは、ある要素の'color'プロパティの値を動的に変化させることができる。
アクセシビリティ。いくつものCSSの機能は、障碍を持つユーザーをWebによりアクセスしやすくする。
注。 CSSやHTMLを使用するアクセシブルな文章の設計についてのより詳しい情報は、[WCAG20]を参照のこと。
