任意の範囲にスタイルを設定する（classとID）
セレクタとは、スタイルを適用する対象を指定するものです。「スタイルシートの書式」ではタグにセレクタを設定するために、要素名をセレクタとして利用しました。実際にはセレクタの指定方法にはいくつもの種類があり、スタイルシートを利用する状況に応じて使い分けができるようになっています。主に利用されるのは、次のようなセレクタです。
1. タグにスタイルを設定する
2. 任意の範囲にスタイルを設定する
3. タグの相関関係（子孫の要素）でスタイルを設定する
4. タグの相関関係（直接の子要素）でスタイルを設定する
5. タグの相関関係（隣接する要素）でスタイルを設定する
6. タグの属性によってスタイルを設定する
7. 疑似クラス・疑似要素一見すると複雑ですが、このようにさまざまなセレクタを用意することで、柔軟にスタイルを指定することができるようになっています。タグにスタイルを設定するには該当が津野要素名をセレクタにします。
複数タグに対して同じスタイルを設定する場合には要素名をそれぞれ「,」（カンマ）で区切って並べることでまとめてスタイルを設定することができます。HTML
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
h1 {background-color:#cfc;}
h1,h2{color:rgb(0,128,0);}
-->
</HEAD>
<BODY BGCOLOR="yellow">
<H1>スタイルシートの設定方法</H1>
<H2>スタイルシートの記述方</H2>
<P> 外部スタイルシートの読み込みでは、HTML文書内でスタイルシートの設定をするのとは異なり、別途、スタイルシートの設定を行ったファイルを用意し、必要に応じて取り込む方法です。</P>
</BODY>
<HTML>スタイルにクラスやIDという特定の識別氏をふっておき、必要に応じてclass属性やid属性で適用させる方法です。複数の要素に対して同じスタイルを適用したり、逆に、比較的限定させて適用させるなど、「タグにスタイルを設定する」ような要素名だけではセレクタを限定できない場合に利用します。クラスでは「．」（ピリオド）に続けてクラス名を、IDは「＃」（シャープ）に続けてID名を指定します。
クラス名とID名にはそれぞれ半角の英数字とハイフンを使って任意の名前を漬かられますが、Netscapeでは1文字目を数字にすると認識しないようなので、クラス名やID名の1文字目に数字をつけるのは避けるようにします。HTML
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
span.sample1 {background-color:#cfc;}
strong#sample2{color:rgb(0,128,0);}
.sampla3 {color:white;
background-color:red;}
#sample4{color:white;
background-color:green;}
-->
</HEAD>
<BODY BGCOLOR="yellow">
<H1>スタイルシートの設定方法</H1>
<H2>スタイルシートの記述方</H2>
<P> 外部スタイルシートの読み込みでは、HTML文書内でスタイルシートの設定をするのとは異なり、別途、スタイルシートの設定を行ったファイルを用意し、必要に応じて取り込む方法です。</P>
</BODY>
<HTML>HTMLタグのツリー構造を利用し、その相関関係によってスタイルを設定する方法です。あるタグ（親要素）に含まれる特定のタグ（子孫である要素）に対してスタイルを設定する場合には、親要素のあとに半角スペースで区切って対象の要素を記述します。
<body>
<H1>
<p>
<span>
<strong>○<ul>
<li>
<strong>×例えば、上のようなツリー構造の場合、P要素の下に含まれているstrong要素に対してスタイルを設定しているため、span要素内にあるstrong要素にもスタイルが適用されます。一方li要素内に含まれるstrong要素には適用されません。
HTMLタグのツリー構造を利用し、その相関関係によってスタイルを設定する方法です。
あるタグ（親要素）の直下のタグ（直接の子要素）に対してスタイルを設定する場合には、親要素と子要素を「＞」で挟んで記述します。
下のサンプルでは、P要素の直接の子要素であるstrong要素に対してスタイルを設定しています。そのため、span要素やli要素内に含まれるstrong要素には本来のstrong要素の効果のみで、スタイルは適用されません。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>タグの相関関係（直接の子要素）でスタイルを設定する</title>
<style type="text/css">
<!--
.blue {color:blue;}
p>strong {color:white;background-color:#ff0099}
-->
</style>
</head>
<body>
<h1>CSSとは</h1>
<p>
<span class="blue">スタイルシートは、一言で表現するならば<strong>「Webページのレイアウトを定義する技術」</strong>ということができます。</span>
スタイルシートを実現する<strong>CSS(Cascading Style Sheet)</strong> には次のものがあります</p>
<ul>
<li><strong>CSS1</strong>・・・1996年に勧告</li>
<li><strong>CSS2</strong>・・・1998年に勧告</li>
</ul>
</body>
</html>HTMLタグのツリー構造を利用し、その相関関係によってスタイルを設定する方法ですが、親子関係ではなく、タグの前後関係によってスタイルを設定します。
この方法では、同じ親を持ち、要素（前要素）の次に出現する特定の要素（後要素）にのみスタイルを設定することができます。
下のサンプルでは、ul要素の直後のp要素のみにスタイルが適用され、h1要素の後ろに来るp要素には適用されません。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>タグの相関関係でスタイルを設定する</title>
<style type="text/css">
<!--
ul+p {
margin:30pt 59pt;
border-color:gray;
border-style:dotted
}
-->
</style>
</head>
<body>
<h1>CSSとは</h1>
<p>
スタイルシートを実現する<strong>CSS(Cascading Style Sheet)</strong> には次のものがあります</p>
<ul>
<li><strong>CSS1</strong>・・・1996年に勧告</li>
<li><strong>CSS2</strong>・・・1998年に勧告</li>
</ul>
<p>スタイルシートは、一言で表現するならば<strong>「Webページのレイアウトを定義する技術」</strong>ということができます。
</p>
</body>
</html>タグの属性を利用してスタイルを指定する方法です。