4章3節では、スタイルシートをタグにスタイル属性として直接記述することで、
要素ごとに見栄えを指定する方法を紹介した。ただ、
文字の大小や色を細かく変化させうｒことで文章に迫力をもたせるテキスト系サイトのような例外を除いては、
要素ごとに見栄えを変化させすぎると、かえって見にくくなってしまう事も多い。
よって、ページ内のデザインに統一感を持たせようとすると、同じスタイルを設定することが多くなる。
そのような時、HTML文書の本文である body 要素の前に書かれるhead 要素内に style 要素を加え、
<style type="text/css">・・・</style> の間に、そのページでよく使われるスタイルをあらかじめ設定しておくとよい。
例えば、このページでは重要な用語や強調したい文章に、
<span style=" color : #ca4028 ; font-weight: bold ; ">・・・</span>
を多用している（ あいうえお←これ ）。
使うたびにタグに記述してもよいが、次のようにあらかじめ設定しておけばよい。
<html lang="ja-JP">
<head>
・
・
・
<style type="text/css">
<!--
.mark{ color : #ca4028 ; font-weight : bold ; }
//-->
</style>
</head>
<body>
・
・
.mark{ color : #ca4028 ; font-weight : bold ; }では、
『クラス mark は、 color 属性の値を #ca4028 、 font-weight 属性の値を bold と指定する時に使うものである』
と定義しており、くだいて言えば
『このページでは、色が #ca4028（黒っぽい赤）で太い文字を使いたい時は、
mark というクラス名を、使いたい要素のタグに書いてくれれば、要素内の文字をそのような見栄えにするよ。』という意味である。
これさえはじめに定義しておけば、<div> ・ <span> ・ <p> といったタグに、
「色が #ca4028で太い文字にする、クラス mark に属していますよ。」という意味で、
<span class=" mark "> ・・・ </span>
と書けば、style="color:#ca4028 ; font-weight:bold;" と指定した時と同じ効果を得ることができる。
クラスを利用すると、複雑な見栄えを繰り返し使う場合も記述が楽になったり、
「強調」「重要語」「見出し」といったような意味でグループ化しておくことで文書が読みやすくなったり、
また、任意のクラスにおける表現の仕方を変更したい時に定義部分だけを変えるだけで済んだりするといったメリットがある。
ところで、クラスの定義（ .mark{ color:#ca4028 ; font-weight:bold ;} ）の時、クラス名 mark の前のピリオド（ . ）は必要であるが、
この記述は、タグの種類に依存しないクラス名を指定する時に使われる。よって、mark は、span だけでなく、div やその他のタグにも利用できる。
一方ピリオドの前に任意のタグ名を書けば、そのタグに依存するクラス名を指定することができる。つまり
span.mark{ color : red ; font-weight : bold ; }
div.mark{ color : black ; font-weight : bold ; }
としておけば、span要素で使う時と div要素で使う時とでは、
同じクラス名 mark を指定しても色が異なる太字となる。
※補足１：複数のタグに指定することができるクラスに対し、
特定の要素ひとつに指定する方法に ID がある。
ある重要な要素の見栄えをあらかじめ設定しておいたりするのに使われ、
以下のように定義・指定する。
#copyright{ font-size : 10px ; white-space : nowrap ; }
<span ID="copyright">Copyright(c) 2003 Mr.HAMACCO All Rights Reserved.</span>
※補足２：特定のタグ名によるページ内の全ての要素に対し、同じ styke属性を与えることができる。
img{border: 2px solid black}
div small{font-size: 10pt;}
１番目は、このページの全ての画像（ img 要素）に 2px の黒縁をつけることを指定している。
２番目は、div 要素の中にある small要素に含まれる文字を 10pt
にすると指定している。
補足３：以上のように style 要素内では、クラス名・ID・タグ名のいずれかを先頭にもってきて、
それをかぎ括弧 ｛ ｝の中でいろいろと見栄えの設定を行う。かぎ括弧の前の部分を、
「どの要素を設定するか選択する」という事からセレクタと呼ばれ、
かぎ括弧の中の 属性 : 値 ; は、
「その要素をどのような見栄えにするのか宣言する」という事から宣言と呼ばれる。
補足４：セレクタに a:〜を記述することで、
a要素のリンクに関する定義済みクラスを指定することができる。
【文書3-6b】のように、
何も指定していないページの a要素内のテキスト（つまりリンクがはられた文字）は、
「過去に読み込んだことがなければ青、あるなら紫」といったような標準設定がされているが、ブラウザによって異なる。
背景が青や紫のWebサイトでは、この設定では見にくい。そこで、
a:link{color:black ;text-decoration:none;}
a:visited{color:black ;text-decoration:none;}
a:hover{color:white ;text-decoration:none;}
たとえばこのように設定しなおすと、過去に読み込んだことがあっても（ link ）なくても（ visited ）黒文字だが、
マウスがふれたときだけ白文字になるようになる。
もちろん、背景が青や紫でないページにも使用できるので、サイトのデザインにあわせて設定すればよい。
補足５：上に示した head 内の記述例で、style要素をコメントアウトしている（ <!-- と //--> でくくっている）のは、
スタイルシート未対応ブラウザを考慮してのことであり、このように記述することが推奨されている。
| 
