Section 7 で <STYLE> を使って HTML の要素と宣言（群）を対応させる方法を紹介した。ここでは，要素にいくつかの分類されたスタイルを対応させておき，それを選別する方法を紹介する。
HTML で <BODY>...</BODY> に書かれるすべての要素はクラスによって分類することができる。
この分類のしかたはページ制作者にまったく恣意である。たとえば，<A> を分類するのに，(1)“内部へのジャンプ”“外部へのジャンプ”としても，(2)“ふつうのジャンプ”“とくにおすすめのサイトへのジャンプ”としてもかまわない。
こういった“分類”は HTML の CLASS 属性で行われる。たとえば，さきほどの (1) の例だったら，このようにクラス分けができる。
<A HREF="..." CLASS="internal">内部へのリンク</A>
<A HREF="..." CLASS="external">外部へのリンク</A>
クラスの名前は大文字と小文字を区別する。
こういったクラスそれぞれに個別のスタイルを適用することができる。具体的には，先ほどの“内部”“外部”のリンクに異なったスタイルを <STYLE> で定義することができる。
実際に <STYLE> にクラスによって異なる CSS を書き込んでいくわけだが，この場合のセレクタは次のようになる。
（要素）.（クラス）
要素とクラスを半角ピリオド「.」で区切る。宣言の書き方自体はいままでとまったく変わらない。
例として，強調 <EM> に“class1”“class2”という 2 つのクラスを作ってみよう。この場合，どちらのクラスにも属さない“既定値”の強調もあるということになる。
<STYLE> に次のように書く。
EM.class1 { color: red; }
EM.class2 { color: purple; }
クラスでの絞り込みを指定された“強調”の出力を見てみよう。
<P>“クラス”により，<EM CLASS="class1">class1 の強調</EM>や <EM CLASS="class2">class2 の強調</EM>というようにスタイルが適用されます。</P>
<P>同じクラスは<EM CLASS="class1">何度でも指定できます</EM>。とくに指定されていないと，クラス無指定の場合は<EM>既定値</EM>です。</P>
“クラス”により，class1 の強調や class2 の強調というようにスタイルが適用されます。
同じクラスは何度でも指定できます。とくに指定されていないと，クラス無指定の場合は既定値です。
この例では，セレクタによって規定される，スタイルが適用される要素は“CLASS 属性に特定の値を含む <EM>”である。これに対して，“CLASS 属性に特定の値を含めば要素の種類は問わない”とすることもできる。この場合，セレクタにはピリオドに続けてクラス名だけを指定して，中かっこでくくった宣言を書く。
.class3 { color: green; }
この命令によって，CLASS 属性に“class3”を含む要素は，特に指定がない限り緑色になる。
<P>CLASS 属性が“class3”である<STRONG CLASS="class3">強い強調</STRONG>，<SPAN CLASS="class3">範囲指定</SPAN>です。</P>
<P CLASS="class3">当然，ブロック要素にもまったく同じように適用されます。</P>
CLASS 属性が“class3”である強い強調，範囲指定です。
当然，ブロック要素にもまったく同じように適用されます。
クラスを使えば，<DIV> および <SPAN> といった“役割のない”要素を“自分で定義した新しい要素”にすることも可能である。しかし，HTML の“文書中での役割を記述する”という基本原則に背くことになる。つまり，HTML の記述が役割を含んでおらず，CSS がなければ役割は読みとれない。クラスによる絞り込みはとくに文書の役割に関係のないところで行うか，既存の HTML 要素に付加的な意味を追加するときに使うのが望ましいといえる。ただし，文書が閲覧される環境がわかっている（イントラネットなど）場合にはこの限りではなかろう。