CSS は全て「スタイル指定を適用する対象（セレクタ：selector）」と「スタイルを指定する内容（宣言ブロック： { property : value ;} ）」の 2つから成り立っています。
宣言ブロックには、プロパティ（property）と 値（value）の 2つがセットになった宣言が0個以上含まれます（空でも良い）。これが、ルールセットと呼ばれる CSS の構成です。
CSS は全て「スタイル指定を適用する対象（セレクタ：selector）」と「スタイルを指定する内容（宣言ブロック： { property : value ;} ）」の 2つから成り立っています。
宣言ブロックには、プロパティ（property）と 値（value）の 2つがセットになった宣言が0個以上含まれます（空でも良い）。これが、ルールセットと呼ばれる CSS の構成です。
この構成（ルールセット）は次のルールに従って記述します。 まず、セレクタの部分には、「スタイルを適用する対象」が入ります。続いて宣言全体を、中括弧（{ }）で囲みます。そして虫括弧（{ }）の中にプロパティと値をコロン（:）で仕切り、最後に値の指定が終わったことをセミコロン（;）で示す宣言を0個以上記述します。 これを図の基本形にあわせれば、p要素といった具体的な要素にのみ宣言した前景色を赤色にするスタイルが適用されます。この他にもセレクタには条件を加えたもの（たとえば特定の属性をもつ）など、スタイルの適用対象はいくつかのパターンで示されます。以下、本文書では、CSS2.1 の仕様で定義されている適用対象となるセレクタを解説します。
* { プロパティ : 値 ; }
セレクタとしてアスタリスク（*）を指定した場合、すべての要素に対してスタイルが適用されます。 また、これを特定の要素と組み合わせて指定することで、「特定の要素に含まれるすべての要素」に、スタイルを適用できます。
たとえば、div * { color: #f00 ; background-color : #fc0 ; } と記述した場合、div要素そのものにスタイルが適用されるのではなく、<div>～</div> 間にある全ての要素（h1, h2, p, strong など）に同じスタイルが適用されます。
セレクタは、要素に続いて半角スペースをいれてアスタリスク（*）を記述します。この場合、スタイルが適用されるのは、指定した要素そのものではなく、指定された要素を親要素とする全ての子孫要素が適用対象となります。このセレクタを全称セレクタと呼びます。
要素 { プロパティ : 値 ; }
これは要素ごとに適用するスタイルを管理できるベーシックな方法で、 一番最初に図で紹介していたスタイル適用の基本形になります。セレクタとして p要素 や div要素、span要素などの具体的な要素名を指定します。指定された要素だけがスタイル宣言のレイアウトを適用する対象となります。
たとえば、h1 { color : #fff ; } と記述した場合、h1要素にのみ「文字色：白」というスタイルが適用されます。
親要素 子孫要素 { プロパティ : 値 ; }
セレクタとして、親要素（selector1）に続けて半角スペースをあけて子孫要素（selector2）を指定します。 これで親要素（selector1）に含まれる子孫要素（selector2）が、スタイルを適用する対象となります。 この記述方法は「段落内の強調する箇所にのみ、目立つように文字の色を変える」といった、文脈に合わせた使い方をする場合に有効です。
たとえば、p strong { color : #f00 ; } と記述した場合、通常の strong要素には何のスタイルも適用されませんが、<p>～</p> 間にある strong要素にのみ「文字色：赤色」というスタイルが適用されます。このセレクタを子孫セレクタと呼びます。
要素1,要素2,要素3,… { プロパティ : 値 ; }
セレクタとして、具体的な要素名をカンマ（,）で区切りながら続けて指定し、複数の要素をひとつのグループにまとめて同じスタイルを適用できるようにします。これをセレクタのグループ化と呼びます。 これにより指定された複数の要素名（要素1,要素2,要素3,…）の全てが適用対象となり、同じスタイルが適用されます。
たとえば、em,i { font-style : normal ; font-weight : bold ; } と記述した場合、通常は斜体で表示される em要素と i要素の表示は、strong要素や b要素と視覚的に同じようになります。
これは em要素と i要素に対して「文字書体：標準;、文字の太さ：太字;」というスタイルが適用され、視覚ブラウザの表示では、デフォルトの strong要素や b要素と同じ表示になっています。
※ただし、視覚的に同じ表示になっていても、その要素のもつ意味まで変わることはありません。
.クラス名 { プロパティ : 値 ; }
要素.クラス名 { プロパティ : 値 ; }
セレクタとして、ピリオド（.）に続けてクラス名を指定します。
これで「class="クラス名"」を追加された要素のみがスタイルを適用する対象となります。このセレクタをクラスセレクタと呼びます。
この指定は、要素の限定をせずに使えるスタイルを指定したり、スタイルをグループ分けするのに役立ちます。
また、これを特定の要素と組み合わせて指定することで、特定の要素で指定したクラス名をもつものに限定したスタイルを適用することがもできます。
たとえば、.heading { background-color : #ff0 ; } と記述した場合、<th class="heading">～</th> や <h1 class="heading">～</h1> のように、要素名に関係なく class="heading" をもつ要素全てに「背景色：黄色」というスタイルが適用されます。
これに対して、h1.heading { background-color : #ff0 ; } と記述した場合は、<h1 class="heading">～</h1> のように h1要素に class="heading" が指定されている場合にのみ「背景色：黄色」のスタイルが適用されます。
同じようにclass="heading" をもつ th要素（<th class="heading">～</th> があっても、この場合はスタイルの適用対象が h1要素にのみ限られているため th要素に対する指定は無効です。
関連リンク: class属性
#ID名 { プロパティ : 値 ; }
要素#ID名 { プロパティ : 値 ; }
セレクタとして Number sign（#）に続けてID名を指定します。
これで「id="ID名"」を追加された要素だけが、スタイルを適用する対象となります。このセレクタを IDセレクタと呼びます。
要素に対して id属性を指定する方法は、class属性と同じですが、class属性は、1つの HTML文書内で同じ class属性の値を複数指定することが可能ですが、id属性は、1つの HTML文書内で一意でなければならず、HTML文書内で複数の要素が同じ ID名をもつことは文法違反となります。つまり 1つのHTML文書内において、同じ ID名を複数（2つ以上）もつ（指定する）ことは許されません。
たとえば、#menu { width: 160px ; color : #f00 ; } と記述した場合、<ul id="menu">～</ul> のように id="menu" をもつ要素にのみ「横幅：160px, 文字色：赤色」のスタイルが適用されます。
HTML の論理構造上、同じページに複数の同じ ID名があることは文法違反となるため、同じページ内に id="menu" をもう一度指定することができないことに注意してください。
また、ID名とクラス名は区別されるので、ID名ですでに「#menu」を使っていても、クラス名に「.menu」を使用することは可能です。
関連リンク: id属性
親要素 > 子要素 { プロパティ : 値 ; }
セレクタとして親要素（selector1）に続けて大なり（>）を子要素（selector2）の前につけて指定します。子孫セレクタと違うのは、特定の親要素の直接の子要素にのみスタイルを適用できることです。 このセレクタを子供セレクタと呼びます。
たとえば、body > p { line-height : 1.5 ; } と記述した場合、<body>～</body> 間の直接の子要素となる p要素にのみ「行の高さ：1.5倍」のスタイルが適用され、body要素間にさらに div要素で囲まれている p要素の場合は、body要素の直接の子要素とはならないためスタイルが適用されません。
※Win版Internet Explorer 6・Mac版Internet Explorer 5 ともに子供セレクタには対応していません。Win版IE7より対応しています。
要素1 + 要素2 { プロパティ : 値 ; }
セレクタとして 2つ以上の要素をプラス（+）で区切って指定します。これで、要素1 と要素2 が隣接している場合にのみ、要素2 にスタイルを適用することができます。要素の並び方によって、装飾を施したい場合に有効です。 このセレクタを隣接セレクタと呼びます。
たとえば、h1 + h2 { margin-top : 1.5em ; } と記述した場合、<h1>見出し1</h1><h2>見出し2</h2> のように h1要素と h2要素が隣接している場合の h2要素にのみ「上のマージン：1.5倍」のスタイルが適用され、その他の h2要素は、h1要素と隣接していないためスタイルが適用されません。
※Win版Internet Explorer 6・Mac版Internet Explorer 5 ともに隣接セレクタには対応していません。Win版IE7より対応しています。
要素[属性名] { プロパティ : 値 ; }
要素[属性名="属性値"] { プロパティ : 値 ; }
要素[属性名~="属性値"] { プロパティ : 値 ; }
要素[属性名|="属性値"] { プロパティ : 値 ; }
セレクタとして要素に続いて大括弧（[ ]）で属性名、さらには属性値を括って指定します。 これで要素についている属性によってスタイルの適用対象を指定することができます。 このセレクタを属性セレクタと呼びます。記述方法には、以下の 4通りがあります。
input[type] のように type属性がついている input要素にのみスタイルを適用しますinput[type="submit"] のように type属性の値が"submit" のinput要素にのみスタイルを適用しますa [rel~="next"] のように rel属性の値に "next" をもつ、または値が複数で半角スペースで区切られている rel属性の値に "next" をもつ場合（rel="next section"）の a要素にのみスタイルを適用しますp[xml:lang|="en"] のように xml:lang属性の値に "en"、またはハイフン（-）で区切られている "en-us" のような値をもつ p要素にのみスタイルを適用します※Win版Internet Explorer 6・Mac版Internet Explorer 5 ともに属性セレクタには対応していません。Win版IE7より対応しています。