基本：スタイルシート（ＳＳ）は、ｈｔｍｌ文書を装飾するプログラムです。
「要素タグ内に直書きのスタイルシート」：要素のタグの中に直接スタイルシートを書く方法もあります。
プログラム文
<要素名 style="属性:値">ハロ〜ワールド</要素名>
しかし、これではＷＥＢサイトのデザインを変えようと思ったときに、一つ一つ書き直していく必要があり、非能率です。
ですから通常、ヘッダにスタイルをまとめて書いたり、外部ファイル化してサイト全体で共有したりします。
これらのことを「ＣＳＳ」と呼んでいます。
外部ファイルでは、複数のスタイルシートを順番に読み込んで、それぞれのスタイルシートの効果を掛け合わせることもできます。
「ヘッダに書くスタイルシート」：スタイル（style）要素を使って「ヘッダ（head）」内にスタイルシートの情報を記入します。
プログラム文
<style type="text/css">
<!--
要素名Ａ{属性１:値;属性２:値;属性３:値;属性４:値;}
要素名Ｂ{属性１:値;属性２:値;}
要素名Ｃ・・・・
-->
</style>
要素ごとに使いたい効果を「波かっこ」でまとめます。「｛ 」と「 ｝」で挟んだ範囲がそうです。
各々の属性及び値については、「属性（字の色や大きさ）」＋「：（コロン）」＋「値（数値や特定文字列）」＋「；（セミコロン）」
の順序を１セットとして｛ ｝内に列記していきます。
ＣＳＳ未対応ブラウザでこのプログラムが書かれたページを閲覧すると、
スタイルシートの文字列がそのままページに書かれてしまいます。
それを避けるためにスタイル要素の中をコメントアウトします。（「<!--」と「-->」の部分）
ＣＳＳ自体はｈｔｍｌプログラムではないので、コメントアウトしても効果があります。
実例
<style type="text/css">
<!--
body{background:#f9ffff;}
p{font-size:1.1em;font-family:Osaka,'ＭＳ Ｐゴシック';line-height:130%;}
img{border-width:0;}
-->
</style>
上のＣＳＳ例では、まず「ｂｏｄｙ」要素（表示部分全体）に、背景色「＃ｆ９ｆｆｆｆ（薄水色）」を指定しています。
次の行で「ｐ」要素（文章、テキスト）に文字のサイズ「１．１ｅｍ」（単位ｅｍについては後述）、文字の種類に
「マックとｗｉｎｄｏｗｓ用フォント」を指定、最後に行間の空け具合「３０％（文字分を入れて１３０％）」を指定しました。
３行目は「ｉｍｇ」要素で、画像の縁取りを消すために、枠線の太さ「０（ゼロ）」を指定しています。
大きさの単位「ｅｍ」：ｅｍは文字の大きさの単位です。１ｅｍは「基準となる文字１つ分の大きさ」に等しく、 「基準となる文字」とは閲覧者が普段使っている（ブラウザで指定している）大きさのことなので、 それぞれの環境・能力にあった文字の大きさに見せることが可能になるアクセシビリティーの高い便利な単位です。
’ＭＳ Ｐゴシック’：フォントの種類を指定するときにフォント名は空白も含め「正確に」記述しなければなりません。
しかし、「属性値中に」空白があるのはエラーになるため、「’（アポストロフィー）」でくくる必要があります。
途中に空白のないフォント名（例えば上記「Osaka」など）にはアポストロフィーは必要ありません。
属性が複数になると読みにくく調整するのに不便なので、通常下のように成形して使います。 （属性間または要素名間での改行、及び半角スペース（ｔａｂを含む）は、自由に使うことが出来ます。）
成形文体
<style type="text/css">
<!--
body{
background:#f9ffff;
}
p{
font-size:1.1em;
font-family:Osaka,'ＭＳ Ｐゴシック';
line-height:130%;
}
img{
border-width:0;
}
-->
</style>
スタイルシートで扱える（装飾用の）属性は非常に多岐にわたり、かつｈｔｍｌ各要素ごとに使える属性も違い、
さらに（！）、ブラウザによって反応も違う場合もあるため、このＷＥＢサイトには一覧表がまだありません。
スタイルシート全てを網羅するデータは、各種書籍をご利用下さい。
（僕は、「スタイルシート辞典・第２版：（ＳＥ社刊）」という参考書を使っています。）
| 「ホムペ作成」のインデックスに戻る | 次のページ（外部スタイルシート）へ |