ひとつの要素にだけスタイルを適用させる方法です。
【クラスの指定と違う点】
クラスの指定とは異なり、ひとつのIDはページ内で一度しか使えません。（IDが重複しないように使用します）
クラスの指定 … ひとつのクラス名を複数の要素で使用することができます。
IDの指定 … ひとつのIDはページ内で一度しか使用できません。
#header { /* ヘッダ */
padding: 5px;
background-color: #808080;
}
#footer { /* フッタ */
padding: 5px;
background-color: #f9f9f9;
}
この場合、header と footer の部分がIDになります。
例えばヘッダやフッタなど、ページ内で一度しか出現しない場所にスタイルを適用させる場合は、IDを使って指定を行うことになります。
シャープ（ # ）に続けてIDを記述します。
※IDの特性上あまり使うケースはないとは思いますが、要素名を加えてIDを指定することもできます。
#example1 { color: red; }
p#example2 { color: blue; }
example1 と example2 の部分がIDになります。
IDには、アルファベットで始まる半角英数字（ - ハイフンも可）で任意の名前を指定できます。
※アンダーバー（ _ ）は使わないほうがいいようです。（一部の古いブラウザではIDが認識されなくなります）
IDを使用したスタイルを要素に適用させるには、id属性を使って次のように記述します。
<h3 id="example1">この文字色は赤になります</h3>
<p id="example2">この文字色は青になります</p>
| id="" | IDを指定します |
|---|
タグに id="" を追加して、その中にIDを指定します。（シャープは付けません）
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example { color: red; }
-->
</style>
</head>
<body>
<p id="example">この文字にスタイルの指定が適用されます</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
入れ子にした指定を行うと、特定の範囲内にある要素にのみスタイルを適用させることができます。
次の例のように、IDと要素名を半角スペースで区切って記述します。
#example p { color: red; }
上記の例では、ID example が指定された要素内のp要素に対してのみ、color: red を適用させています。それ以外のp要素には、このスタイルは適用されません。
次の例では、example を指定したdiv要素内のp要素に、color: red が適用されることになります。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example p { color: red; }
-->
</style>
</head>
<body>
<div id="example">
<p>この文字にスタイルの指定が適用されます</p>
<p>この文字にスタイルの指定が適用されます</p>
</div>
<div>
<p>この文字には適用されません</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
