CSS Syntax:

CSS-Angaben bestehen aus mindestens drei Elementen:

1) der Selektor
Hört sich bedenklich technisch an, gemeint ist damit aber das Objekt oder die Bezeichnung, der eine Formatierung zugewiesen werden soll.

Unterschieden wird hierbei in Elementselektoren (z.B. ein XHTML-Tag wie <h1>), Klassenselektoren (ein frei definierter Name, wie bei Layoutprogrammen oft üblich) und Pseudo-Klassen (wichtigste Pseudo-Klasse ist die Anker-Klasse).

2) die Eigenschaft
Die Eigenschaft ist die Formatierungsform, also die Definition, was nun genau am Selektor formatiert werden soll (z.B. die Schriftgröße oder -farbe)

3) der Wert
Der Wert ist die Spezifizierung der Eigenschaft, die konkrete Angabe des "wie", also bei der Eigenschaft "Schriftgröße" der Wert "12 Punkt", oder bei der Schriftfarbe der Wert "Schwarz" (genauer #000000).
 

In der Kombination sieht dies dann folgendermaßen aus:

Selektor {Eigenschaft: Wert}
Beispiel: h1 {font-size: 12pt}

Wie man erkennen kann werden Eigenschaft und Wert in geschweifter Klammer hinter den Selektor gesetzt. Eigenschaft und Wert werden durch Doppelpunkt getrennt.
 

 
Selektoren mit mehreren Eigenschaften

Ein Selektor kann auch mehrere Eigenschaften besitzen:
Selektor {Eigenschaft1: Wert1; Eigenschaft2: Wert2}
Beispiel: h1 {font-size: 12pt; color: #000000}
Mehrere Eigenschaften werden durch Semikola voneinander getrennt.

Die Schreibweise von Selektoren, die mehrere Eigenschaften besitzen, wird aus Gründen der Übersichtlichkeit wie folgt vorgenommen:

h1 {
       font-size: 12pt;
       color: #000000
      }

Für Fortgeschrittene: Es ist möglich, einer Eigenschaft mehr als einen Wert zuzuweisen (die Schreibweise wird dadurch verkürzt, aber auch nicht so selbsterklärend wie bei der ausführlichen Schreibweise und nur in bestimmten Fällen anwendbar):
Selektor {Eigenschaft1: Wert1; Wert2; Wert3}
Beispiel: div {padding: 10px; 5px}, ist identisch mit
div {padding-top: 10px; padding-right: 5px}
 

 
Mehrere Selektoren
Es können auch mehreren Selektoren die gleiche Eigenschaft zugeordnet werden:
Selektor1, Selektor2 {Eigenschaft1: Wert1}

Hier werden die Selektoren durch Kommata getrennt.

Beispiel: h1, h2, h3 {color: #000000}, ist identisch mit
h1 {color: #000000}
h2 {color: #000000}
h3 {color: #000000}
 

 
Kombinierte Selektoren

Die oben beschriebenen Angaben beziehen sich immer auf ein bestimmtes Element (hier bisher nur Tags), die immer in der angegebenen Form ausgezeichnet werden, unabhängig von ihrer Position. Es ist aber auch möglich, Elemente eine spezifische Auszeichnung zuzuweisen, wenn sie in bestimmten Kombinationen auftauchen:

p {font-size: 12pt}
strong {font-style: italic}

Diese Auszeichnung gibt an, dass Absätze, die mit einen <p>-Tag ausgezeichnet sind, eine Schriftgröße von 12 Punkten erhalten sollen, Texte, die hervorgehoben ausgezeichnet sind, sollen kursiv dargestellt werden (der Fettdruck des Befehls <strong> wird dabei übernommen).

p strong {color: #ff0000}

Durch die hier angewandte Schreibweise, also zwei Selektoren hintereinander, OHNE Kommatatrennung, betrifft die Auszeichnung nur Text, der mit <strong> INNERHALB eines mit <p> ausgezeichneten Absatzes hervorgehoben wurde. Er wird rot.

So sieht's aus