グループ単位でスタイルを適用させる方法です。

ページ内で繰り返し使うようなスタイルの指定は、ひとつのグループとしてまとめて設定しておきます。そのグループに対して付けられる名前が「クラス名」となります。

例えば、下記のように「枠付きボックス」と「背景色付きボックス」の2種類のスタイルを用意したとします。

ページ内で「枠付きのボックス」のデザインを使いたいときは、その部分の要素に対して example1 を指定します。同様に、「背景色付きのボックス」のデザインを使いたいときは example2 を指定します。それぞれ同一のページ内で繰り返し使うことができます。

要素名に続けてクラス名を指定する方法と、クラス名だけで指定する方法があります。どちらの場合も、クラス名はピリオド（ . ）に続けて記述します。

クラス名には、アルファベットで始まる半角英数字（ - ハイフンも可）で任意の名前を指定できます。
※アンダーバー（ _ ）は使わないほうがいいようです。（一部の古いブラウザではクラス名が認識されなくなります）

クラス名を使用したスタイルを要素に適用させるには、class属性を使って次のように記述します。

タグに class="" を追加して、その中にクラス名を指定します。（ピリオドは付けません）

次のように、複数のクラス名を同時に指定することもできます。（一部の古いブラウザでは対応していないようです）

要素名に続けてクラス名を指定すると、その種類の要素でのみクラスの指定が適用されます。

上記の例では、p要素に example というクラスを指定しています。

要素名による指定では、同じ種類の要素全てに対してそのスタイルが適用されますが、クラス名を加えて指定を行うと、同じ種類の要素であってもクラス別に適用させることができます。

クラス名だけで指定すると、要素の種類に関連しないクラスの指定が行えます。

複数種類の要素に対して、そのスタイルの指定内容を適用させることができます。

入れ子にした指定を行うと、特定の範囲内にある要素にのみスタイルを適用させることができます。

次の例のように、クラス名と要素名を半角スペースで区切って記述します。

上記の例では、クラス名 example が指定された要素内のp要素に対してのみ、color: red を適用させています。それ以外のp要素には、このスタイルは適用されません。

次の例では、example を指定したdiv要素内のp要素に、color: red が適用されることになります。