ここまでさまざまな属性や概念を個別に見てきたわけだが，“これができる”というだけで実際の応用には触れなかった。ここでは，簡単な応用例を通して CSS の使い方を感じてほしい。
ここでは，洋書の専門書などに見られるデザインを簡単に再現してみよう。このデザインの特徴は，
これに，若干のデザインを加えてみよう。
それでは，CSS を作ってみよう。
まずは，<BODY> のスタイルは背景白，周囲に余裕。余裕は幅の 5% にしよう。
BODY { background: white; padding: 5%; }
“タイトル”は <H1> で書くとすれば，
H1 { text-align: center; font-size: xx-large; }
本文はマージンは左にとることにして，これを <BODY> に入れると“概要”などに負のマージンを指定する羽目になる。したがって，“本文”の部分は大きく <DIV> でくくって，
DIV.text { margin-left: 15%; }
としたほうが都合がよかろう。<DIV> は汎用性があるから，後で拡張するときにおかしなカスケーディングが生じないようにクラス text をつけておいた。
“パラグラフ段落のはじめは 2em のインデント」は簡単で，
P { text-indent: 2em; }
“概要”はクラス化しておこう。文字もひとまわり小さくする。
P.abst { font-size: small; }
このとき，カスケーディングにより <P> の 2em のインデントも適用されることに注意。
さて，本文中に入るであろう見出しのうち，<H2>，<H3> をそれぞれ“章レベル”“節レベル”としてマージンの外側へ出そう。そのためには負のマージンを指定しなければならない。<H3> については，その半分程度まで戻せばよいだろう。
H2 { margin-left: -15%; }
H3 { margin-left: -8%; }
章レベルの <H2> には，背景色と枠を指定する。背景は淡い水色，枠は上下のみで，左右は指定しないことにしよう。スタイルは二重線，色はそれよりやや鈍い色にしてみる。
H2 { margin-left: -15%; background: #CFF;
border-style: double;
border-width: medium 0;
border-color: #9CC; font-size: x-large; }
<H3> には，下に青く細い線を引こう。
H3 { margin-left: -8%;
border-style: solid;
border-width: 0 0 thin 0;
border-color: #33F; font-size: large; }
これで最初に上あげた目標はすべて満たしたことになる。結果，できた CSS は次のようになる。
BODY { background: white; padding: 5%; }
H1 { text-align: center; font-size: xx-large; }
H2 { margin-left: -17.5%; background: #CFF;
border-style: double;
border-width: medium 0;
border-color: #9CC; font-size: x-large; }
H3 { margin-left: -9%;
border-style: solid;
border-width: 0 0 thin 0;
border-color: #33F; font-size: large; }
DIV.text { margin-left: 15%; }
P { text-indent: 2em; }
P.abst { font-size: small; }
これをファイル化して <LINK> などで呼び出して使うことになる。このとき，HTML の <BODY> 部分ははこう組まれる。
<BODY>
<H1>...</H1>
<P CLASS="abst">...</P>
<DIV CLASS="text">
<H2>...</H2>
<H3>...</H3>
<P>...</P>
<P>...</P>
...
<H3>...</H3>
...
<H2>...</H2>
...
</DIV>
</BODY>
この CSS をファイル化したものを sfcssamp.css としておくので，ダウンロードして上にならって HTML を書いてみよう。このとき，見た目に関係する HTML の属性は指定しないようにしよう。また，この CSS ファイルを使用して作ったサンプルの HTML ファイルも参考にされたい。
次に CSS ファイルを改良してみよう。改良点としては，
などがあるだろう。
IE3 外部の CSS ファイルでは <BODY> のスタイルが無効になることを再び注意しておく。