この概説では, 単純なスタイルシートの設計がいかに容易にできるか を示す。この概説の理解のためには，HTML ([HTML40]参照)及び基本的なデスクトップ出版用語を多少 知っておく必要がある。
短いHTML文書から始める。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//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: blue }
CSS規則は, 選択子('H1')及び宣言('color: blue')の二つの主要部分から構成される。宣言には, 特性('color')及び値('blue')の二つの部分がある。この例は，HTML文書をレンダリングするため必要な特性の一つだけに影響を及ぼそうとするものであるが，それ自体へのスタイルシートと見なせる。それは, 他のスタイルシートと組み合せて(スタイルシートを組み合せることは, CSSの一つの基本機能)，文書の最終的な表示を決定する。
HTML 4.0規定は，スタイルシート規則がHTML文書に対してどのように指定されるか を規定する。つまり, HTML文書内で指定されるか，外部のスタイルシートによって指定されるか のいずれかとする。スタイルシートを文書に付けるために，STYLE要素を使用する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</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.0//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.0//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
ここで，スタイルシートは二つの規則を含む。最初の規則は, BODY要素の色を'赤'に設定し，2番目の規則はH1要素の色を'青'に設定する。 P要素に指定される色値はないため，親要素であるBODY要素から色を継承する。 H1要素もBODYの子要素であるが，2番目の規則が継承値を上書きする。 CSSでは，異なる値の間でこの矛盾は頻繁にあり, この規定は，それらを 解決する方法を示す。
CSS2は, 'color'を含む，100以上の さまざまな特性をもつ。他の特性を見てみよう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//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'フォントファミリを使用する。 'sans-serif'フォントファミリは，すべての利用者エージェントが知っている 五つの共通フォントファミリの一つである。BODYの子要素は, 'font-family'特性の値を継承する。
2番目の宣言は，BODY要素のフォントサイズを12ポイントに設定する。 "ポイント"単位は，印刷ベースの技術で広く使用され，フォントサイズ及び その他の長さの値を示す。これは，環境によって変化しない絶対単位の一例とする。
3番目の宣言は，周囲に応じて変化する相対単位を使用する。"em" 単位は, 要素のフォントサイズを参照する。この場合，BODY要素の周囲のマージン(1)は，フォントサイズの3倍になる。
注1
原規定の英語は"margin"。JIS TR X 0011 "段階スタイルシート水準1(CSS1)"では"余白"と訳していたが，日本語の"余白"は広い意味をもち，本文中の空白部分を指す可能性があるなど誤解しやすいため，JIS X 0023の用語に従って，この標準情報(TR)では，"マージン"とした。
CSSは，どんな構造化文書フォーマットでも使用できる。例えば，拡張可能なマーク付け言語[XML10]のアプリケーションで使用できる。 実際，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文書にリンクする方法の一つとして，処理命令を使用することを提案する。
<?XML:stylesheet type="text/css" href="bach.css"?>
<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の作業をサポートする利用者エージェントがどのように動くかの可能なモデルを示す。これは概念モデルにすぎず，実際の実装は, それとは異なってよい。
このモデルでは，利用者エージェントは, 次のステップを進むことによってソースを処理する。
値の計算の一部は，対象メディア型に適するフォーマットアルゴリズムに依存する。例えば, 対象メディアが画面である場合，利用者エージェントは, 視覚フォーマット化モデルを適用する。 対象とするメディアが印刷されたページである場合，利用者エージェントは, ページモデルを適用する。対象とするメディアが音声合成装置などの聴覚レンダリング装置である場合，利用者エージェントは, 聴覚レンダリングモデルを適用する。
CSS利用者エージェントは，この時点では文書ツリーを変更することはない点に注意すること。特に，スタイルシートによって生成される内容は，再構文解析のためなどに，文書言語プロセサにフィードバックされない。
ステップ1は, この規定の適用範囲外であり, 例えば, [DOM]を参照すること。
ステップ2〜5は, この標準情報(TR)の大部分で規定される。
ステップ6は，この規定の適用範囲外にある。
すべてのメディアについて， 描画面という語は, "フォーマット化構造がレンダリングされる空間"を示す。 描画面は，空間の各次元に関して無限であるが，レンダリングは通常，対象メディアに応じて利用者エージェントが設定した描画面の有限領域内で行われる。 例えば，画面にレンダリングする利用者エージェントは，最小幅を課し， 表示域の大きさに基づいて初期幅を選択する。 ページにレンダリングする利用者エージェントは通常，幅及び高さの制約を課す。聴覚利用者エージェントは，オーディオ空間に制限を課してもよいが，時間に制限を課してはならない。
CSS2の選択子及び特性は，スタイルシートが 文書又は利用者エージェントの次の部分を参照することを可能にする。
CSS2は, その前のCSS1と同様に，次の設計原則集に基づている。
上位互換性及び下位互換性 CSS2利用者エージェントは, CSS1スタイルシートを理解できる。CSS1利用者エージェントは， CSS2スタイルシートを読むことができ，理解しない部分を破棄できる。 CSSをサポートしない利用者エージェントは, スタイル拡張した文書をも表示できる。当然，CSSによって可能になったスタイル拡張はレンダリングされないが，内容はすべて表示される。
構造化文書に対して相補的 スタイルシートは，HTMLアプリケーション 及びXMLのアプリケーションなどの構造化文書を補完し，マーク付けテキストに スタイル情報を提供する。マーク付けにほとんど又は全く影響せずに，スタイルシートを変更することは容易であることが望ましい。
ベンダ, プラットフォーム及び装置への非依存性 スタイルシートは，文書をベンダ，プラットフォーム及び装置に非依存にできる。スタイルシート自体もベンダ及びプラットフォーム非依存であるが，CSS2は，プリンタなどの装置グループにスタイルシートを合わせることができる。
保守性 文書からスタイルシートを指定することによって， ウェブマスタはサイトの保守を簡素化し，サイトのどこでも一貫性のある外観及び感覚を保つことができる。例えば，組織の背景色を変えるとき，一つだけのファイルを変更すればよい。
簡潔性 CSS2はCSS1よりは複雑であるが，人間が読み取ったり書込んだりできる簡単なスタイル言語であることに変わりはない。CSS特性は，可能な限り最大限，互いに独立であるようにされていて，ある効果を得るための方法は，一般に一つしかない。
ネットワーク性能 CSSは，内容表現の方法の コンパクト符号化を提供する。あるレンダリング効果を実現するために文書作成者がよく使用する画像ファイル又はオーディオファイルと比較すると，スタイルシートが, 最も頻繁にその内容サイズを減らす。さらに，ネットワーク性能を高めるため，なるべくネットワーク接続を開かないようにしなければならない。
柔軟性 CSSは, いくつかの方法で内容に適用できる。 主要なものは，デフォルトの(利用者エージェント)スタイルシート，利用者スタイルシート， リンクされるスタイルシート，文書のヘッド，及び文書本体を形成する要素に関する属性 において指定されるスタイル情報を段階化する機能とする。
充実性 文書作成者に充実したレンダリング効果の集合を提供することは，表現のメディアとしてウェブの充実性を高める。設計者は， デスクトップ印刷及びスライドショーのアプリケーションで 共通に見られる機能を望んできた。要求されるレンダリング効果には装置非依存性 と矛盾するものもあるが，CSS2は，設計者の要求を受け入れるのに役立つ。
代替言語結合 この規定で示すCSS特性の集合は，視覚表示及び聴覚表示に関して，一貫性のあるフォーマット化モデルを形成する。このフォーマット化モデルは，CSS言語によってアクセスできるが，他の言語への結合もできる。例えば，JavaScript プログラムが， ある要素の'color'特性の値を動的に変更してもよい。
アクセス可能性 次のいくつかのCSS機能は, 障害のある利用者に対してウェブをさらにアクセスし易くする。
備考 CSS及びHTMLを用したアクセス可能文書を設計するための詳細情報は，[WAI-PAGEAUTH]を参照のこと。
