スタイルシートにかかれている内容は・・・

スタイルシートをエディタで開いてみましょう。

例えば、example01.cssというスタイルシートには次のような内容が記述されています。

body{
background-color:#ff99ff;
}

h1{
color:#ff0000;
}

基本的には

セレクタ{
属性：値；
}

という形式になります（見やすさを考えて、『：』と『；』は全角文字で記述しましたが、正しくは半角文字で記述します）。

もう少し詳しく書くとセレクタの部分は次のような形式（上の例のように、クラス名がない場合もあります）

タグ名．クラス名{
属性：値；
}

になっています（ここも見やすさを考えて『．』を全角で記述しましたが、正しくは半角文字で記述します）。
同じタグでも別のスタイルを設定したい場合があります。
この時には、クラスという別々の名前をつけて区別するのです。
あとで解説に出てきますが、

div.hitotsume{
background-color:white;
}

div.futatsume{
background-color:skyblue;
}

のようにしてスタイル（デザイン）を別々に設定して、必要に応じて使い分けます。

上の例では、bodyタグの適用範囲に背景色を#ff99ffに、最もサイズの大きいヘッダタグ、h1の内容に#ff0000（赤色）を設定しています。

戻る