CSS はスタイルを適用する対象であるセレクタ（selector）とスタイル情報を設定する宣言ブロックの2つから成り立っており、宣言ブロックの中身は空にするか、プロパティ（property）と値（value）をセットにした宣言を記述します。この構成を CSS のルールセット（規則集合）と呼びます。
ルールセットはまず先頭にスタイルを適用する対象であるセレクタを記述し、続いて左中括弧（{）から始り対応する右中括弧（}）で宣言全体を囲むようにします。そして、中括弧（{ }）の中に0個以上の宣言を記述していきます（空でも良い）。宣言はプロパティと値をコロン（:）で仕切り、最後に値の指定が終わったことをセミコロン（;）で示します。図のルールセットであれば、p要素といった具体的な要素型名にのみ宣言した前景色を赤色にするスタイルが適用されます。セレクタはこの他にも条件を加えたもの（たとえば特定の属性をもつ）など、いくつかのパターンが用意されています。以下、CSS2.1 で定義されているセレクタについて解説します。
要素 { プロパティ : 値 ; }
これは要素ごとに適用するスタイルを管理できるベーシックな方法でスタイル適用の基本形になります。セレクタとして p要素や div要素、span要素などの具体的な要素型名を指定します。指定された要素だけがスタイル宣言のレイアウトを適用する対象となります。
たとえば、h1 { color : #fff ; } と記述した場合、h1要素にのみ「文字色：白;」というスタイルが適用されます。このセレクタをタイプセレクタ（Type selectors）と呼びます。
親要素 子孫要素 { プロパティ : 値 ; }
セレクタとして親要素（selector1）に続けて半角スペースをあけて子孫要素（selector2）を指定します。これで親要素（selector1）に含まれる子孫要素（selector2）がスタイルを適用する対象となります。この記述方法は「段落内の強調する箇所にのみ、目立つように文字の色を変える」といった、文脈に合わせた使い方をする場合に有効です。
たとえば、p strong { color : #f00 ; } と記述した場合、通常の strong要素には何のスタイルも適用されませんが、<p>" と "</p>" の間にある strong要素にのみ「文字色：赤色;」というスタイルが適用されます。このセレクタを子孫セレクタ（Descendant selectors）と呼びます。
* { プロパティ : 値 ; }
セレクタとしてアスタリスク（*）を指定した場合、すべての要素に対してスタイルが適用されます。また、これを特定の要素と組み合わせて指定することで、「特定の要素に含まれるすべての要素」にスタイルを適用できます。
たとえば、div * { color: #f00 ; background-color : #fc0 ; } と記述した場合、div要素そのものにスタイルが適用されるのではなく、<div>" と "</div>" 間にある全ての要素（h1, h2, p, strong など）にスタイルが適用されます。
セレクタは、要素に続いて半角スペースをいれてアスタリスク（*）を記述します。この場合、スタイルが適用されるのは、指定した要素そのものではなく、指定された要素を親要素とする全ての子孫要素が適用対象となります。このセレクタを全称セレクタ（Universal selectors）と呼びます。
要素1,要素2,要素3,… { プロパティ : 値 ; }
セレクタとして、具体的な要素型名をカンマ（,）で区切りながら続けて指定し、複数の要素をひとつのグループにまとめて同じスタイルを適用できるようにします。これをセレクタのグループ化と呼びます。これにより指定された複数の要素型名（要素1,要素2,要素3,…）の全てが適用対象となり、同じスタイルが適用されます。
たとえば、em,i { font-style : normal ; font-weight : bold ; } と記述した場合、通常は斜体で表示される em要素と i要素の表示は、デフォルトの strong要素や b要素と同じ視覚的な体裁になります。これは em要素と i要素に対して「文字書体：標準; 文字の太さ：太字;」というスタイルが適用され、これを解釈する UA ではデフォルトの strong要素や b要素と同じ表示になります。この複数の要素をひとつにまとめてスタイルを適用することをグループ化（Grouping）と呼びます。
.クラス名 { プロパティ : 値 ; }
要素.クラス名 { プロパティ : 値 ; }
セレクタとして、ピリオド（.）に続けてクラス名を指定します。これにより class="クラス名" を追加された要素のみがスタイルを適用する対象となります。このセレクタをクラスセレクタ（Class selectors）と呼びます。この指定は、要素の限定をせずに使えるスタイルを指定したり、スタイルをグループ分けするのに役立ちます。また、これを特定の要素と組み合わせて指定することで、特定の要素で指定したクラス名をもつものに限定したスタイルを適用することもできます。
たとえば、.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名 { プロパティ : 値 ; }
セレクタとしてハッシュ（#）に続けてID名を指定します。 これで id="ID名" を追加された要素だけが、スタイルを適用する対象となります。このセレクタを IDセレクタ（ID selectors）、または一意セレクタと呼びます。要素に対して id属性を指定する方法は、class属性と同じですが、class属性は、1つの文書内で同じ class属性の値を複数指定することが可能です。しかし、id属性は1つの文書内で一意でなければならず、文書内で複数の要素が同じ ID名をもつことは文法違反となります。つまり 1つの文書内において同じ 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）の前につけて指定します。子孫セレクタと違うのは、特定の親要素の直接の子要素にのみスタイルを適用できることです。このセレクタを子供セレクタ（Child selectors）と呼びます。
たとえば、body > p { line-height : 1.5 ; } と記述した場合、"<body>" と "</body>" の間にある直接の子要素となる p要素にのみ「行の高さ：1.5倍;」のスタイルが適用され、body要素間にさらに div要素で囲まれている p要素の場合は、body要素の直接の子要素とはならないためスタイルが適用されません。
*Windows版Internet Explorer 6 と Macintosh版Internet Explorer 5 はともに子供セレクタに対応していません。Windows版Internet Explorer 7 より対応しています。
要素1 + 要素2 { プロパティ : 値 ; }
セレクタとして2つ以上の要素をプラス（+）で区切って指定します。これで要素1と要素2が隣接している場合にのみ、要素2にスタイルを適用することができます。要素の並び方によって、装飾を施したい場合に有効です。このセレクタを隣接セレクタ（Adjacent sibling selectors）と呼びます。
たとえば、h1 + h2 { margin-top : 1.5em ; } と記述した場合、<h1>…1</h1><h2>…2</h2> のように h1要素と h2要素が隣接している場合の h2要素にのみ「上のマージン：1.5倍;」のスタイルが適用され、その他の h2要素は h1要素と隣接していなければスタイルが適用されることはありません。
*Windows版Internet Explorer 6 と Macintosh版Internet Explorer 5 はともに隣接セレクタには対応していません。Windows版Internet Explorer 7 より対応しています。
要素[属性名] { プロパティ : 値 ; }
要素[属性名="属性値"] { プロパティ : 値 ; }
要素[属性名~="属性値"] { プロパティ : 値 ; }
要素[属性名|="属性値"] { プロパティ : 値 ; }
セレクタとして要素に続いて大括弧（[ ]）で属性名、さらには属性値を括って指定します。これで要素についている属性によってスタイルの適用対象を指定することができます。このセレクタを属性セレクタ（Attribute selectors）と呼びます。属性セレクタの記述方法には、以下の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要素にのみスタイルを適用します*Windows版Internet Explorer 6 と Macintosh版Internet Explorer 5 はともに属性セレクタには対応していません。Windows版Internet Explorer 7 より対応しています。