CSSの基本原理を理解しよう

ブラウザはHTMLで記述された文書構造を読み取って、スタイルシート(以下CSS)と照らし合わせることによってはじめて「画面のどの場所にどのくらいの大きさで何を表示させるか」を計算することが可能になります。
そして、計算通りに画像や文字が画面に描画(レンダリングと言います)された結果が、私たちが普段見ているホームページなのです。

ところで、HTMLの構造とCSSの情報によってブラウザ上で表示を計算し、実際に計算結果に従ってブラウザに描画するというホームページ掲載の仕組みを実現するためには、HTMLのどの部分にどんなCSSを割り当てればよいかという「HTMLとCSSの関連付け」をブラウザに教えてあげる必要があります。
具体的には、HTMLファイルに記述したタグに、目印となるidやclassを追加して、CSSファイルに目印ごとのスタイルを記述します。

3通りの指定方法を使い分けるポイントは以下です。
・同じ名前のタグに共通のスタイルを割り当てるときは、HTMLタグの名前で指定する。
・特定の部分だけに固有のスタイルを割り当てるときは、idで指定する。
・複数の部分に共通のスタイルを割り当てるときは、classで指定する。

また、CSSを書くときは、意図した通りの表示になりさえすればよいのではなく、「classを使って共通化したほうが管理が楽になるだろうか?」「あえてidを使って別々に管理したほうがわかりやすいだろうか?」といった観点を持つことが一番大切なことです。