スタイルシートを使う為の準備

HTMLの時と同じように、スタイルシートを使う前にもちょっとした準備をしましょう。 スタイルシートのファイルはメモ帳の.txtの拡張子を.cssにしておけばOKです。 入力はHTMLの時と同じように半角英数字で。 DOCTYPE宣言などの余計なものは必要なく、スタイルシートをそのまま書いていきます。

スタイルシートの書き方

スタイルシートにも書き方のルールがあります。 具体的に書くと、
h1{color:red}
h1はセレクタ、colorは属性(プロパティ)、 redは値と呼ばれます。 「セレクタの属性を値にする」と覚えて下さい。 この場合に当てはめると、「見出しタグh1の色を赤にする」ということになります。

スタイルシートでは1つのセレクタに対して複数の属性を設定できます。 属性同士の間は;(セミコロン)で区切って下さい。
セレクタ{属性A:値A;属性B:値B}

複数のセレクタに同じスタイルを指定することも出来ます。この場合はセレクタを,(コンマ)で区切って下さい。
セレクタA,セレクタB{属性:値}

セレクタにも種類があります。HTMLのタグは基本セレクタといいます。 例えば見出しタグの色を変える時に、同じh1タグでもこっちは赤にしてこっちは青にしたいということが出てきます。 そういうときは、IDセレクタとCLASSセレクタというものを使います。 基本セレクタに名前をつけて区別するようなものと思って下さい。 IDとCLASSを複数使い分けることで、1つのタグにでも無数のスタイルを適用できるわけです。 名前は自分の好きなものをつけることができます。

IDセレクタの場合は#(シャープ)をつけて#dogといった具合に、CLASSは.(ドット)をつけて.catなどと表します。 IDは1つのHTMLファイルの中で1回しか書けませんが、CLASSはいくつでも書くことが出来るというところが違います。 IDを複数書いても認識してくれるブラウザもあるので、IDとCLASSの明確な違いというのは薄れてきていますが、 基本的には違うものだと理解しておいて下さい。

IDとCLASS、両方とも単体で使用することができますし、基本セレクタと組み合わせて使うことも出来ます。 例えば、
#dog{属性:値}
h1#dog{属性:値}
.cat{属性:値}
p.cat{属性:値}
などとして使います。
スタイルシートの本

スタイルシートとHTML>>