1.3 HTML への適用
1.2 では CSS の書き方の基本を解説した。ここでは，それを HTML 文書に反映させる方法を見てみよう。
STYLE 要素
1.1 で触れたように，CSS では，文書のデザインを，文書本体とは別に，まとめて行うことが基本である。HTML の要素である STYLE は，その文書に適用するスタイルシートをまとめて記述する場である。この要素は，HTML のヘッダ部分に書かれる。
CSS の場合は，STYLE 要素の必須の属性である TYPE に対して，text/css という値を与える。
<STYLE TYPE="text/css">...</STYLE>
STYLE 要素の内容がスタイルシートである。この部分に書かれたルールセットなどは，その文書に対して適用される。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>CDMA</TITLE>
<STYLE TYPE="text/css">
H1 { color: maroon; }
DFN { color: navy; }
</STYLE>
</HEAD>
<BODY>
<H1>CDMA とは</H1>
<P> <DFN>CDMA</DFN> は符号分割多重を用いたアクセスをさす。符号分割多重（<DFN>CDM</DFN>）は，同じタイムスロットおよび周波数領域に，互いに直交する方式を用いて符号化した信号を多重するものである。</P>
<P> CDM では，従来多重方式として用いられてきた <DFN>FDM</DFN>（周波数分割多重），<DFN>TDM</DFN>（時分割多重）よりも，複雑な多重分離の技術が必要になる。</P>
</BODY>
</HTML>
この HTML は，次のように出力される。
CDMA とは
CDMA は符号分割多重を用いたアクセスをさす。符号分割多重（CDM）は，同じタイムスロットおよび周波数領域に，互いに直交する方式を用いて符号化した信号を多重するものである。
CDM では，従来多重方式として用いられてきた FDM（周波数分割多重），TDM（時分割多重）よりも，複雑な多重分離の技術が必要になる。
とくに，DFN 要素が，color: navy; の宣言によってすべて藍色で出力されていることに注目されたい。当然，この navy を green に変えれば，一転してこのファイル中の DFN 要素はすべて緑色になる。
ところで，上の例において，STYLE 要素の内容は，スタイルシートに対応していないブラウザが誤って表示させてしまう可能性がある。CSS のスタイルシートは，HTML（SGML）のコメント（<!-- ... -->）として記述しても構わないことになっている。したがって，例の STYLE 要素の部分は，
<STYLE TYPE="text/css">
<!--
H1 { color: maroon; }
DFN { color: navy; }
-->
</STYLE>
と書いておくとより安全である。CSS のスタイルシートは，HTML のコメント内に記述されていても正しく処理される。したがって，STYLE 要素を用いるときには，上のような“定型”を覚えておくとよい。
XHTML に対しては，スタイルシートをコメントとすると本当にコメントの扱いになり，読み飛ばされてしまう。詳細は，A.1 を参照されたい。
外部に用意された CSS ファイル
たかだか 1 つのファイルに対してスタイルを適用させるのであれば，STYLE 要素を用いる方法でじゅうぶんであるが，複数の文書ファイルに対して共通のデザインを施す場合には，スタイルシートを共有できればひじょうに便利である。
実際，スタイルシートのみが書かれたファイルを用意しておき，これを HTML ファイルから参照し，そのスタイルシートを適用させることができる。
この“スタイルシートのみが書かれたファイル”は，テキストエディタで編集することができる。たとえば，
H1 { color: maroon; }
DFN { color: navy; }
とだけ書かれたファイルでも，立派に CSS で書かれたスタイルシートのファイル（以下，単に“CSS ファイル”という）である。これを style.css というファイル名で作成したとする（CSS ファイルの拡張子は，一般に .css が使われる）。
さて，HTML からこのような CSS ファイルを呼び出す方法であるが，そのひとつに，LINK 要素を用いるというものがある。これは，ヘッダ部分に書かれる。CSS ファイルを参照するときの書式は，次のようになる。
<LINK REL="stylesheet" TYPE="text/css" HREF="URI">
そこで，先ほどの style.css が，適用させたい HTML ファイルと同じディレクトリにあるとして，これを
<LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">
として参照すれば，style.css のスタイルシートがその HTML ファイルに適用される。
この方法の利点は，いちどファイルを作ってしまえばそれを複数のファイルで使い回せ，統一されたデザインをひじょうに効率のよい方法で実現できるところにあるが，それ以上に，CSS ファイルを変更することで，それを利用している HTML ファイルのデザインが，それらのファイルにまったく手をつけることなく変更されるという醍醐味がある。
CSS を用いたサイト構築には，この方法を強くおすすめする。
STYLE 属性
HTML の要素（FONT，CENTER など）や属性（BGCOLOR，ALIGN など）でデザインを行っていた従来の方法と同様に，CSS を適用させる方法もある。この方法は，CSS の基本である“一括デザイン”とは異なって，多少効率の悪い方法であるが，簡便な方法であり，特定の箇所にだけスタイルを適用させる場合に有効である。
この場合，CSS の記述は各要素の STYLE 属性に対して行う。
<ELEMENT STYLE="宣言 宣言 ...">
STYLE 属性の値とするのは宣言である。また，STYLE 属性を持たない要素もある。
STYLE 属性の例をご覧いただこう。
<P> ペーパーレス時代の文書は，それが<EM STYLE="background-color: black; color: white;">一時的なものでなく永続的なものになりうる</EM>という点が重要である。</P>
ペーパーレス時代の文書は，それが一時的なものでなく永続的なものになりうるという点が重要である。