CSSクイック・チュートリアル

　スタイル・シートはスタイル・ルールからなり、文書をどのように表示するかをブラウザに伝えるものです。 HTMLにスタイル・ルールをリンクする幾つかの方法がありますが、最もシンプルなものはHTMLでSTYLE要素を使う方法です。この要素は文書のHEADに書き、そのページでのスタイル・ルールになります。

　STYLE要素はスタイル・シートを経験するにはいい方法ですが、実際にこれを使うには前もって考えておかなければならないと言う不利な面もあります。色々な方法の利点と不利な点については、スタイル・シートをHTMLにリンクすることで詳しくみます。

　ルールは、selectorとselectorに適応されるスタイルから構成されています。普通、 BODY・ Pや EMなどのHTML要素がselectorになります。

　要素を定義するプロパティがたくさんあります。各プロパティーには値があり、プロパティーとともにselectorがどのように表示するかを記載します。

スタイル・ルールは以下のようなります：

selector { property: value }

　一つのセレクターでの複数のスタイル宣言は、セミコロン;でつなぎます。

selector { property1: value1; property2: value2 }

　例をあげてみます。以下のコードは、 H1とH2で、 colorとfont-sizeのプロパティーを定義したものです：

<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
  H1 { font-size: x-large; color: red }
  H2 { font-size: large; color: blue }
</STYLE>
</HEAD>

　上の例のスタイル・シートは、レベル1の見出しはextra-large、redフォントで表示し、レベル2の見出しはlarge、blueフォントで表示するようにブラウザに伝えます。 W3C CSS1仕様書には全てのプロパティと値が決められています。プロパティと値は、このページの CSSプロパティセクションにもあげてあります。

　このチュートリアル（練習レッスン）では、カスケーディング・ッスタイル・シートの基本的な導入ですが、自分でスタイルを書いてみる場合の十分な情報を提供しています。カスケーディング・スタイル・シートをより深く知りたいなら、以下のセクションを読んで下さい：

Maintained by John Pozadzides and Liam Quinn