タグの属性で、次のようなクラス名を指定することができます。
<○○ class="クラス名">　 このクラス名は、一つのHTMLファイルの中で、
複数の箇所に使うことができます。
つまり、クラスセレクタは、 複数の箇所に使うこと前提にスタイルを指定する場合で使います。
対して、以下のIDはその名前を指定できるタグが一箇所だけでなければなりません。

IDセレクタ　(ページ内の 一ヵ所を指定するID)

タグの属性で、ID名は次のようにid属性で指定します。（クラス属性と併用することもできます。）
<○○ id="IDの名前">　
そして一度使った"IDの名前"を、再び別の要素のidタグ属性に使ってはいけません。
例えば、次のソース例は間違いです。 

<p id="abc">文章A</p>
<p id="abc">文章B</p>
<div id="abc2">文章C</p>

上記のabcは、既に存在するID名なので、 一方は異なる名前にしなければ なりません。
つまり、HTMLの中で「あるID名」の要素は一つだけということです。
よって逆にあるID名から、HTML内の一つの要素を特定することができます。
（JavaScriptで、obj = document.getElementById("あるID名");は、 ID名で特定した一つの要素を 変数objに管理させる表現です。）

そして、ID名が付いた要素をスタイルのセレクタで指定する場合は次のように#の文字で指定します
要素のタグ名#ID名 { プロパティ名: 値; } と書きます。
また 次のように要素のタグ名を書かない書き方も可能です。
#ID名 { プロパティ名: 値; }
例えばheadの中で、文字書体と背景色を指定するセレクタの例は次のようになります。 

<style type="text/scc">
 p#abc { font-family: monospace; background-color: yellow;}
 #abc2 { font-family: serif; background-color: ;}
</style>

さてこのように、個々の一つを特定するID名が付いた要素は、どのように使われるのでしょうか？
それは、ある目的を持った要素を指定するために使われます。
そのため、上記例のabcやabc2のように意味がない名前を付けるのは好ましくありません。
HTML内のある一つの要素ということは、そのHTML内で固有の目的を持っているところなので、 その目的に合った英単語などにすべきです。以下でいくつかのID名の例を示します。

残念ながら、ID名に日本語は使えませんが、ローマ字で書いてもよいでしょう。 いずれにしても、HTML内にある一つの意味ある名前を付けた所になるわけです。 そうすることで、大きなHTMLなどでは このID名で検索し、変更など 保守が容易になります。
以下の問題で練習してみましょう。

なお、divのstyleでoverflowの指定がありますが、これは 内容が入りきらない場合に、どう対応するかので次のような指定があります。
visible ボックスからはみ出して表示されます。（デフォルト）IEは、ボックスの方が内容に合わせて拡張されます。
scroll 入りきらない内容はスクロールして見られるようになります。
hidden はみ出た部分は表示されません。
auto ブラウザに依存します（一般的にはスクロールして見られるようになります）。

<body> の中を追加するだけの問題です。