２つの class属性に異なる背景色を指定します。 追々説明していきますので、とりあえず。
.mammalia {
background-color: yellow
}
.insecta {
background-color: olive
}
class属性に求めるものは凡庸性となります。 生物分類で Class といえば、哺乳綱（哺乳類）であるとか昆虫綱であるとか、 非常に大雑把な区分に用いられます。 人間もキリンもゾウも同じクラス（Mammalia Class）となります。 アメンボだって生きているんですが友達ではなく、これは別のクラス（Insecta Class）になります。
#HIROSHI {color: blue}
#SACHIKO {color: red}
#NANCY {color: red}
#DIPTERA001 {color: red}
#DIPTERA002 {color: purple}
#DIPTERA003 {color: purple}
id属性は identity （アイデンティティー）の略でしょうが、要するに唯一無二の個を表します。 生物分類での最小単位は種（Species）であり、人間は Homo sapiens ですが、人間と申しましても多数存在します。 ID はそんな中の一個人を識別するものです。 ですから、id の名前は人間の名前と考えて差し支えないと思います。
病院の待合室で数十人の人が診療を待っているとします。 そして、病院からのアナウンスで一人ずつ呼び出されていきます。 ”田中ヒロシ”さんは１回ポッキリしか呼ばれないはずです。 例え、同姓同名の”田中ヒロシ”さんが５人いたとしても各個人はきちんと識別され、 病院側は５人分のカルテを用意します。 やむを得ず、同じ名前の id属性を複数作りたい場合は、 #HIROSHI01, #HIROSHI02, #HIROSHI03 などと命名すれば良いでしょう。
<p class="mammalia"> <span id="HIROSHI">ヒロシ</span> <span id="SACHIKO">サチコ</span> <span id="NANCY">ナンシー</span> </p>
ヒロシ サチコ ナンシー
mammalia クラスは哺乳類を表し、背景色は黄色の設定です。 オスは青字で、メスは赤字になるように id属性で指定されています。 ヒロシは人間でもキリンでもゾウでも（哺乳類のオスなら）何でもいいわけです。
<p class="insecta"> <span id="DIPTERA001">アブ？</span> <span id="DIPTERA002">ハエ(大).01</span> <span id="DIPTERA003">ハエ(大).02</span> </p>
アブ？ ハエ(大).01 ハエ(大).02
insecta は昆虫綱を表すクラス（背景色はオリーブ色）です。 例えば、ハエ採り紙に３個体のハエ類が引っ掛かっていたとします。 虫だとしても、標本を作る場合などを想定して一個体ずつ別個に識別する必要があります。 雌雄が分からないものは紫文字になるよう id属性で指定しています。
class と id の違いを考える為に無理やり生物学的な分類作法で説明してきましたが、 これらを踏まえてどう スタイルシート構文に活かすか？ というコトが問題となります。
class属性は何回でも呼び出すコトが可能です。 この段落では mammaliaクラスを再度、呼び出してみました。 ただし、id属性であるHIROSHIやSACHIKOはもう呼び出せません。 id は同一ファイル内で一度しか用いてはならないからです。
現状のブラウザではid属性を複数回呼び出す所為も可能ですが、 それはブラウザのバグ回避プログラムに助けられているだけのハナシです。 極力、ブラウザの機構に頼らないウェブ作りこそ目指すところなので、id の重複禁止ルールは尊重するべきです。
<a href="#HIROSHI">ヒロシ</a> <a href="#DIPTERA001">アブ？</a>
ヒロシ アブ？ ちなみに id属性は name属性と同様の使い方ができます。 ページ内リンクのリンク先指標に用いることが可能なわけです。 この機能と関連して ID の属性値は大文字で記述するコトが推奨されています。
例えば一つのページを複数のセクションに分けて、それぞれのセクションの冒頭に <h2> で見出しを付けるとします。 第１セクションも第２セクションも一回しか登場しません。 ですから、各個のセクションに id属性を設定するコトが可能なわけです。
.section {
font-family: 平成明朝,serif;
border: solid 2px teal
}
#SEC1 { background-color: rgb(176,224,230) }
#SEC2 { background-color: rgb(184,224,222) }
#SEC3 { background-color: rgb(192,224,214) }
#SEC4 { background-color: rgb(200,224,206) }
このページは４つのセクションから構成されていますが、それぞれに共通の class属性（.section）を与え、 それぞれに別個の id属性を与えてみました。
<h2 class="section" id="SEC1"> Class属性 </h2>
このようにしたら、それぞれのセクションへ飛ぶページ内リンクも作成可能です。 <ol> の番号付きリストでページ内ナビゲーションを作ってみました。