CSS
クラスとID
HTMLにおいて、ある一つの要素を使い分けたい場合、class属性やid属性を利用する。そしてCSSでそのクラスやIDに対して見た目を指定することができる。
クラス
例えばp要素は段落を示す要素であり、通常の文章（見出しなど以外の文章）は、<p></p>でタグ付けされる。
しかし例えば通常の文章でも、導入文（リード文）、本文、図版の説明文（キャプション）など、文章の意味が異なる場合があり、p要素を使い分けたい場面がある。
そのような場合に利用するのがclass属性であり、以下のようにclass属性に続いてclass名を指定することで、p要素を使い分けることができる。
<p class="lead">導入文用のP要素</p>
<p>通常のP要素（本文用）</p>
<p class="caption">図版の説明文用のP要素</p>
class名は半角英数字であれば任意につけて良いが、内容を反映したものであるほうが良い。
HTMLでclass属性を用いクラス分けをすることで、CSSでもクラスごとの見た目を指定することができる。
上記のクラス分けに対して、CSSでの指定方法は以下の通り。要素名の後に.（ピリオド）を書き、続いてclass名を指定するとそのクラスの要素に対してCSSを記述できる。
p {
color: #333333;
}
p.lead {
color: #339933;
font-size: 1.25em;
}
p.caption {
font-size: 0.8em;
}上記は、導入文用のクラスleadの文字色を#339933（緑っぽい色）、文字サイズを1.25倍にし、図版の説明文用のクラスcaptionの文字サイズを0.8倍にしている。それぞれの指定は、それぞれのクラス名が指定されたp要素のみに反映される。クラスごとの記述はもとの要素（この場合はただのp）から変える部分だけ書けば良い。
ID
クラスと似ているが、1ページ（1つのHTMLファイル）の中に1箇所しか出てこないような部分は、id属性でID名を指定する。
つまりクラスは1ページ内で複数でてくる可能性があるような箇所に用い、IDは1ページ内で単一の箇所に用いる。逆の言い方をすれば、class名は1ページ内での重複が許されるが、id名は1ページの中での重複が許されない。
<div id="content">
<div id="main">
<h2>春の野菜</h2>
<p>○○○○</p>
<h3>グリーンアスパラガス</h3>
<p>○○○○</p>
<h3>たけのこ</h3>
<p>○○○○</p>
<h3>春キャベツ</h3>
<p>○○○○</p>
</div>
<nav>
<ul>
<li>春の野菜</li>
<li>夏の野菜</li>
<li>秋の野菜</li>
<li>冬の野菜</li>
</ul>
</nav>
</div>id名も半角英数字であれば任意につけて良いが、内容を反映したものであるほうが良い。
CSSでIDごとの見た目を指定することができるのもクラスに同じである。
上記のIDに対して、CSSでの指定方法は以下の通り。要素名の後に#（シャープ）を書き、続いてid名を指定するとそのid名の要素に対してCSSを記述できる。
div#content {
color: #ffffff;
background-color: #339933;
}
div#main {
background-color: #ffffff;
}上記は、id名contentの文字色を#ffffff（白）、背景色を#339933（緑っぽい色）にし、id名mainの部分の背景色を文字色を#ffffff（白）にしている。