スタイルシートの概要

ブラウザへ何を見せるかという情報の構造を指定するものがHTMLで、 『HTMLタグ』と『見せたい文』の記述順番で表現します。
対して、このHTMLに色やサイズなどの飾りを指定する方法が、 CSS(Cascading Style Sheets:カスケーディング・スタイル・シート)です。 以後は、略してスタイルシートと呼びます。

スタイルシートの指定は、どのタグをどのように見せるかと言う見栄えの指定で、 HTMLのタグに対して指定します。 個々のHTMLタグには、もともと、どのように表示させるか?という属性があり、その属性の 内容を変更するイメージです。(注1
例えば 背景色のスタイルシートにおける属性名は、background-colorになっており、ページ全体の背景であれば 次のように指定できます。

<body style="background-color: #   ;">

上記のbackground-color: に続く表現は、光の三原色を意味する色のデータで、全ての光がない#000000の指定で黒になり、 全ての光を最大で指定する#FFFFFFの指定で白になります。
光の三原色の各 赤 緑 青 の16進数の値を下で変更できるようにしてあります。
red(赤):   green(緑):   blue(青):←クリックして選択し、上の背景色を#C8F8F8へ変更してください。
上記で各色を組み合わせ、全ての色を指定できます。いろいろ確かめてみましょう。

background-colorの部分は属性名プロパティと呼ばれ、各タグに応じたさまざま設定が可能です。
#C8F8F8は 色を表現する場合の設定値で16進数2桁ごとで 指定しますが、 名前が付いている色であれば、次のように色の名前で指定することもできます。

	background-color: blue;

上記のようにプロパティ名の直後に: (半角のコロンと半角スペース)を書き、 続いて書いた設定値の直後に;(半角のセミコロン)を書く規則になっています。 この表現を、何回でも重ねるよう(cascading)に並べて書くことができます。 (同一プロパティ名に対する記述順番で、前方で最後に書いた設定値が有効です)
一つのプロパティ名とその値の設定は次のように指定します。

	プロパティ名: ;
例	background-color: #CCFFFF;

複数指定する場合は、この表現を次のように並べます。

	プロパティ名1: 値1; プロパティ名2: 値2; プロパティ名3: 値3;
例	background-color: #CCFFFF; color: red; font-size: 32pt;

スタイルシートの記述位置は次の3通りです。

  1. 使っているHTMLタグのstyle属性に直接指定する。
    この書き方は、下の2つの方法より優先して働きます。分かりやすいので例によく使いますが、HTMLの構造が煩雑に見えるので多用すべきものではありません。

  2. bodyの中でなく、headの中に セレクタ呼ばれるタグ名などを指定し、そのファイル全体に反映させる書き方です。

  3. headの中で、外部にあるスタイルシートのファイルでを指定する。
    (同じスタイルシートのファイル使うと同じ飾りのページでき、この方法が、最も使われます。)


注1
補足: 例えば、<body> タグではbgcolorを指定して背景色を指定できます。
この属性に対応するスタイルシートの属性名がbackground-colorになっています。
つまり、background-colorの内容を変更することでも、背景の色が変わるという訳です。
body タグでは bgcolor の属性があるので、わざわざタイルシートのbackground-colorを使わなくても 背景色を指定できます。例です→<body bgcolor="#000000">
しかし、h1,h2,h3・・やpのタグではbgcolorを指定できません。
ですが、スタイルシートの属性名のbackground-colorを使えばh1などの背景色も指定できるのです。
歴史的にはスタイルシートが後から作られた規則です。 この時に、類似性のあるタグに対して、統一的な属性名が指定できるように考慮されました。 それがスタイルシートの属性名です。
そして現在、タグ自身の属性指定でなく、スタイルシートの属性指定を使う方がよい。 とされています。