p { font-weight : bold }
/* <p> の中の文字を太字に */

なんて、エンベットスタイルシートを使うと、困ることもあるじゃん。例えば、上のヤツだと、ページの全部の <p> 内のテキストが、太字になっちまう。
こんな風に、エンベットスタイルシートで特定の部分だけスタイルを適用したい場合に使うのが class と id だぜ！

class を指定するには、セレクタの所を「.class名」として、それを適用させたいタグに「class="class名"」を指定すればオッケーだ。

<style type="text/css">
<!--
  strong { color : #993333 ; }
  .class1 { color : #336699 ; }
-->
</style>
…省略
<strong class="class1">
  ここに、class1 が適用 </strong>

classの利点は、インラインスタイル（style属性）みてぇに好きな部分だけにスタイルを適用する事が出来て、しかもエンベットスタイルシートの利点のスタイル一括指定も使えるコトだぜ。
「class="class名"」をスタイルを適用したいタグにいれるだけでオッケーで、あとでそのスタイル指定を変えたくなった時は、{ プロパティ : 値 ; }の部分を変えれば一括してスタイルを変更できる。ラクだろ？

クラスを使うときは、セレクタに「.class名」だけ指定すればいい。でも、同じクラス名でそれぞれの要素ごとに違うスタイル指定をしたい場合なんかは、下のように「要素名.class名」ってするぜ。

<style type="text/css">
<!--
  strong.class1 { color : red ; }
  em.class1 { color : blue ; }
-->
</style>

ただ、「要素名.class名」ってセレクタを指定した場合、それと違った要素につけても無効化されるから注意しようぜ。例えば、こんなカンジ。

<strong class="class1">
  strong.class1 が適用 </strong>
<em class="class1">
  em.class1 が適用 </em>
<tt class="class1">
  .class1 も tt.class1 も指定されてないから、無効 </tt>

id を設定するには、セレクタを「#id名」にして、それを適用させたいタグに「id="id名"」をいれるぞ。

<style type="text/css">
<!--
  strong { color : #993333 ; }
  #id1 { color : #336699 ; }
-->
</style>
…省略
<strong id="#id1"> ここに、id1 が適用 </strong>

classとidには、ルールがあるんだ。下のことに注意しようぜ。

• 1つのIDは、ページに1回しか使えない
  だから、「#B1」ってidを指定したら、ページの中で「id="B1"」を入れられるのは１箇所だけ。

• classもidも半角英数字とハイフン(-)、アンダースコア(_)のみしか使えない
  「クラス１」とか「ＩＤ１」みたいな、全角文字のclass名やid名なんかは使えない。

• id名は数字からは始められない
  「#1div」みたいな数字から始まる名前はIDにはつけられない。

• classもidも大文字小文字を区別する
  だから「.CLASS1」と「.class1」は別物。ただ、ブラウザによっては区別しないものもあるらしいぞ。