CSSは、HTMLの書式定義（レイアウト）をＨＴＭＬ本文と分離して記述するための手法です。
皆さんが作成するホームページがわずかなページで構成されていれば、その内容を書き直すのはたいした手間ではありません。しかし、このＨＴＭＬについてのページだけでも、数十ページになります。たとえば文字の書体を変更使用ととすれば、その手間は大変なことになります。このページには背面に 岸田ゼミとＣＳＳについての絵文字が表示されていますが、これもＣＳＳで設定しています。これを別のものに差し替えるときも、各ページごとに処理すれば、その手間は大きな負担となります。そのようなときに、ＣＳＳをうまく利用すれば、簡単な操作で関連するページを全て変更できます。
なお、ＣＳＳは全てのブラウザで動作するものではありません。ＩＥではバージョン4以降、NNではバージョン4以降で動作しますが、バージョンにより動作の違いがあると指摘されています。
CSSはどのように書くのか
１．タグに直接記入する方法
タグに直接CSS命令（プロパティ）を記入する方法です。たとえば
<HTML>
<HEAD>
<TITLE>CSSTEST1</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV STYLE="background:blue;color:white">
CSSを直接タグに記入する
</DIV>
</BODY>
</HTML>
と記入します。CSSの部分は
STYLE="ｂａｃｋｇｒｏｕｎｄ：ｂｌｕｅ；ｃｏｌｏｒ：ｗｈｉｔｅ"の部分です。実行例
ｂａｃｋｇｒｏｕｎｄは背景色の意味です。ｂｌｕｅ（青）と指定しています 。ｃｏｌｏｒは文字の色です。
blue を yellow, maroon, #55aa77, rgb(255,200,100)に変更してみましょう。
この書式の指定方法は
<タグ名 ｓｔｙｌｅ="プロパティ名：値">
<タグ名 style="プロパティ名：値；プロパティ名：値；・・・・">
となります。
この方法は、タグにＣＳＳのプロパティを全部書き込むことになり、スタイルを変更するときは全てを書き直すことになります。実際にはＣＳＳを使用するメリットはありません。どちらかといえば動作確認用の方法かもしれません。
２．ＨＴＭＬのヘッダー部でＣＳＳの宣言をする方法
<HEAD>と</HEAD>との間にＣＳＳの宣言を記述し、ここで指定したタグについてスタイルを指定するものです。この方法は、１．の例ではスタイルを指定したい全てのタグにＣＳＳプロパティを書かなければならないのと比べれば手間は大幅に軽減されます。
<HTML>
<HEAD>
<TITLE>CSSTEST2</TITLE>
<STYLE type=text/css>
h1{color:red;}
div{background:blue;color:white;}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h1>ＣＳＳの書き方</h1>
<DIV>
CSSをＨＥＡＤ部に記入する
</DIV>
</BODY>
</HTML>
と記入します。ＣＳＳの部分は
<STYLE type=text/css>
hi{color:red;}
div{background:blue;color:white;}
</STYLE>
です。ｔｙｐｅ＝ｔｅｘｔ／ｃｓｓを忘れないようにしましょう。またタグの定義の書き方にも注意します。
ｈ１｛ｃｏｌｏｒ：ｒｅｄ；｝ =>ｈ1タグの書式を指定します。文末のセミコロン（；）を忘れないように。
ｄｉｖ｛ｂａｃｋｇｒｏｕｎｄ：ｂｌｕｅ；ｃｏｌｏｒ：ｗｈｉｔｅ；｝ =>１のｄｉｖ定義と同じです。 実行例
この例で、ｈ1タグとｄｉｖタグを追加してみます。
<HTML>
<HEAD>
<TITLE>CSSTEST2</TITLE>
<STYLE type=text/css>
h1{color:red;}
div{background:blue;color:white;}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h1>ＣＳＳの書き方</h1>
<DIV>
CSSをＨＥＡＤ部に記入する
</DIV>
<h1>これはｈ１タグで指定した部分です</h1>
<DIV> これはｄｉｖタグで指定した部分です </DIV>
</BODY>
</HTML>
同一タグは指定スタイルにより同じように表示されます。 実行例
ここで、指定部分を変更してみましょう。例えばｈ１タグは見出文字で大文字指定です。
いま ｈ１｛ｃｏｌｏｒ：ｒｅｄ；ｆｏｎｔ−ｓｉｚｅ：ｘ−ｓｍａｌｌ；｝としてみましょう。 実行例
タグの本来の指定ではなく、ＨＥＡＤ部でのＣＳＳでの指定スタイルとなります。このように一括変更するのはいいのですが、変更したくない場合もあります。
このような場合は、１．の個別タグでスタイル指定をします。個別タグの指定が最優先されるからです。次の例では、後半のｈ1タグで個別にスタイル指定をしています。
<HTML>
<HEAD>
<TITLE>CSSTEST2</TITLE>
<STYLE type=text/css>
h1{color:red;font-size:x-small;}
div{background:blue;color:white;}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h1>ＣＳＳの書き方</h1>
<DIV>
CSSをＨＥＡＤ部に記入する
</DIV>
<h1 style="font-size:x-large">これはｈ１タグで指定した部分を個別タグ記入で変更したものです</h1>
<DIV> これはｄｉｖタグで指定した部分です </DIV>
</BODY>
</HTML>
このようにヘッド部でスタイル指定をすると、そのページについては一括変更ができるものの、複数のＨＴＭＬ文からなるシステムでは、すべてのページのヘッド部について指定をする必要が出てきます。例えば１００のＨＴＭＬ文があれば、１００個所の書き直しが必要になります。この手間を回避するためにＣＳＳでは定義ファイルを使用することができます。
３．定義ファイル（ＣＳＳファイル）を使用する方法
ヘッド部での定義をＣＳＳファイルに記述しておき、ヘッド部では定義ファイルを使用すると宣言することにより、そのような宣言がされているページのスタイルをＣＳＳファイルを変更するだけで変更できます。
<HTML>
<HEAD>
<TITLE>CSSTEST３</TITLE>
<LINK rel=stylesheet type=text/css href=cssteigi.css>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h1>ＣＳＳの書き方</h1>
<DIV>
CSSをＨＥＡＤ部に記入する
</DIV>
<h1>これはｈ１タグで指定した部分です</h1>
<DIV> これはｄｉｖタグで指定した部分です </DIV>
</BODY>
</HTML>
ｈｒｅｆで参照しているｃｓｓｔｅｉｇｉ．ｃｓｓがＣＳＳ定義ファイルです。直前の例のＨＥＡＤ部の定義をこの定義ファイルに記述します。下の例に従って作成します。
h1{
color:red;font-size:x-small;
}
div{
background:blue;color:white;
}
この文を秀丸などのエディタを使用して書き、cssteigi.css として現在ＨＴＭＬ文を保存しているディレクトリに保存します。 実行例
ヘッダとCSSファイルにおける書式の指定方法。
指定方法はヘッダとCSSファイルとは同じです。基本的な書式は次のとおりです。
タグ名｛プロパティ名：値；｝
タグ名｛プロパティ名：値；プロパティ名：値；・・・・｝
タグ名，タグ名，・・・｛プロパティ名：値；プロパティ名：値；・・・｝
のように記述します。タグ名をコンマで区切り連続させて指定したときは、一連のタグにつき｛ ｝内の指定が有効となります。｛ ｝内では、スペースやタブ、改行、大文字小文字は無視されます。つまり複数行に書いたりしても問題はないことになります。上のｃｓｓｔｅｉｇｉ．ｃｓｓを次のように記述してもよいことになります。
h1{
Ｃolor：ＲeＤ；
font-size:x-small;
}
div{ background：blue；
Ｃolor：
white；
}
クラス指定
タグ名にはピリオッドに続けてクラス名の指定することができます。クラスの書式を指定した後、ピリオッドを打ちクラス名を続ける事もできます。次のように記述します。
タグ名．クラス名｛プロパティ名：値；プロパティ名：値；・・・・｝
．クラス名｛プロパティ名：値；プロパティ名：値；・・・｝
クラス名は自由に書くことができます。例えばｈ1タグにａｋａというクラスとｋｕｒｏと言うクラスを作ります。この指定はつぎのようにします。
ｈ1．ａｋａ｛Ｃｏｌｏｒ：ｒｅｄ；
ｆｏｎｔ-size：150%；
｝
．ｋｕｒｏ｛Color：ｂｌａｃｋ；ｆｏｎｔ−ｓｉｚｅ：200%；｝
ヘッドに定義するときの例を次のように変更します。
<HTML>
<HEAD>
<TITLE>CSSTEST2</TITLE>
<STYLE type=text/css>
h1.aka{color:red;
font-size:150%;
}
．kuro｛color:black；font-size:200%;｝
div{background:blue;color:white;}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h1 class=aka>ＣＳＳの書き方</h1>
<DIV>
CSSをＨＥＡＤ部に記入する
</DIV>
<h1 class=kuro>これはｈ１タグでクラス指定した部分です</h1>
<DIV> これはｄｉｖタグで指定した部分です </DIV>
</BODY>
</HTML>
入れ子のタグ指定
タグには単独でも入れ子でも使用できるものがあります。そこで入れ子で使用するタグのみにスタイルを指定することもできます。そのときは次のように指定します。
タグ名１ タグ名２｛プロパティ名：値；・・・・｝
タグ名１の入れ子となるタグ名２という意味となります。タグ名とタグ名とはスペースで区切ります。 上の例について<DIV>と</DIV>の間に、<b></b>を入れ子タグとして追加し、入れ子タグとして指定を追加します。（赤字で表示）
<HTML>
<HEAD>
<TITLE>CSSTEST2</TITLE>
<STYLE type=text/css>
h1.aka{color:red;
font-size:150%;
}
．kuro｛color:black；font-size:200%;｝
div{background:blue;color:white;}
div b{backgroud:red;color:blue;}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h1 class=aka>ＣＳＳの書き方</h1>
<DIV>
CSSをＨＥＡＤ部に記入する
</DIV>
<h1 class=kuro>これはｈ１タグでクラス指定した部分です</h1>
<DIV> これはｄｉｖタグで<b>指定した部分</b>です
</DIV>
</BODY>
</HTML>
Aタグの指定
Aタグは<a href=リンク先>や<a name=リンク名>のように使用するものです。ただ name= のときは表示されませんのでCSSで対象となるのは、href= のあるAタグということになります。このタグはリンク先に行く前と訪問後とで色が変わるようになっています。Aタグのリンク状態は３つあります。ただしＩＥではもうひとつの状態があります。これをまとめると次のようになる。
次の例はヘッダでの定義例です。リンクの状態により、色、文字のサイズを変更します。ＩＥの場合カーソルを「最初に戻る」にあわせると、字が緑色になり文字サイズが150％になります。
<HTML>
<HEAD>
<TITLE>CSSTEST4</TITLE>
<STYLE type=text/css>
h1.aka{color:red;
font-size:150%;
}
．kuro｛color:black；font-size:200%;｝
div{background:blue;color:white;}
A．kishida：link{
color：cornflowerblue；
background：whitesmoke；
｝
A．kishida：visited{
color：black；
text-decoration：none；
｝
A．kishida：active{
color：red；
text-decoration：line-through；
｝
A．kishida：hover{
color：ｇｒｅｅｎ；
font-size：150%；
text-decoration:underline;
｝
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<a name="zemi"></a>
<h1 class=aka>ＣＳＳの書き方</h1>
<DIV>
CSSをＡタグに使用する
</DIV>
<h1 class=kuro>これはｈ１タグでクラス指定した部分です</h1>
<DIV> これはｄｉｖタグで指定した部分です </DIV>
<A class=kishida href=#zemi>最初に戻る</A><br>
<A class=kishida hfre=#naiyo>訪問先なし</A>
</BODY>
</HTML>