p { color: red }
| p | セレクタ |
| color | プロパティ |
| red | 値 |
上記の例の場合、p要素に対してスタイルを設定しています。(セレクタの部分には、要素名の他にIDやクラス名などが使用できます)
スタイルの指定内容は { } 内に記述しますが、この例では文字色を指定するプロパティ(color)と、その値に赤(red)を指定しています。
スタイルの指定は、「プロパティ」と「値」のセットで行われます。
color: red
上記の例のように、プロパティと値はコロン( : )で区切って記述します。(左側がプロパティ、右側が値)
次の例のように、ひとつのセレクタに対して複数のスタイルを設定することもできます。
h1 { padding: 3px; background-color: #f9f9f9; color: red }
p {
margin: 10px;
color: green;
line-height: 120%;
}
複数のスタイルを設定する場合は、上記の例のようにセミコロン( ; )で区切って記述していきます。一番最後の( ; )は、入れても入れなくてもどちらでも構いません。
セレクタは、カンマ( , )で区切って複数指定することもできます。
h1, h2, h3 { color: red }
上記の例の場合、h1、h2、h3、それぞれの要素に対して color: red を指定しています。
■Aセレクタ Bセレクタ![]()
![]()
![]()
![]()
セレクタとセレクタを半角スペースで区切って記述すると、Aセレクタの範囲内にあるBセレクタにのみ、スタイルを適用させることができます。
p strong { color: red; }
■Aセレクタ > Bセレクタ![]()
![]()
![]()
セレクタとセレクタを > で区切って記述すると、Aセレクタの「直下」にあるBセレクタにのみ、スタイルを適用させることができます。
※「直下」とは位置的な「下」ではなく、階層的な「下」のことです。(直接の子要素という意味)
p > strong { color: red; }

上記の例の場合、p要素の直下にあるstrong要素にのみ、color: red を適用させています。それ以外のstrong要素には、このスタイルは適用されません。
※この指定方法はIEでは対応していません。
■Aセレクタ + Bセレクタ![]()
![]()
![]()
セレクタとセレクタを + で区切って記述すると、両方のセレクタが同じ親要素を持ち、Aセレクタの「直後」にあるBセレクタにのみ、スタイルを適用させることができます。
h2 + p { color: red; }

上記の例の場合、同じ親要素(body要素)を持つh2要素の直後にあるp要素にのみ、color: red を適用させています。それ以外のp要素には、このスタイルは適用されません。
※この指定方法はIEでは対応していません。
/* と */ に囲まれた内容は、コメントとして扱われます。
/* この部分がコメント */
/*
この部分がコメント
*/
次のような感じで、作者の覚え書きとして使用すると便利です。
h1 { color: red } /* 見出しのスタイル */
p { line-height: 120% } /* 段落のスタイル */