Schriftfarbe Rot (
color: #FF0000;
) und den Schriftstil kursiv (
font-style:italic;
). Textabsätze (
p
) und Listenpunkte (
li
) sollen in 110 Prozent Schriftgröße (
font-size: 110%;
), mit einer Zeilenhöhe von 140 Prozent (
line-height: 140%;
) in der Schriftart Helvetica oder wenn nicht verfügbar, in Arial, und wenn ebenfalls nicht verfügbar, in irgendeiner Sans-Serif-Schrift dargestellt werden (
font-family: Helvetica, Arial, sans-serif;
). Außerdem werden auch noch Angaben zum Zeichenabstand (
letter-spacing
) und zum Wortabstand (
word-spacing
) gemacht.
13.2.9    Formate für verschachtelte HTML-Elemente
    Wenn Sie nichts anderes angeben, übernimmt ein HTML-Element, das innerhalb eines anderen HTML-Elements vorkommt, dessen Eigenschaften und fügt seine eigenen Eigenschaften nur hinzu. Wenn Sie beispielsweise für Überschriften 1. Ordnung die Schriftart Times und die Farbe Rot definieren, erscheint Text, der innerhalb einer solchen Überschrift mit

…

formatiert wird, ebenfalls rot und in Times, aber zusätzlich kursiv.
    Mit Hilfe von CSS können Sie jedoch bestimmen, dass ein HTML-Element bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Elementsvorkommt. So können Sie etwa bestimmen, dass

…

innerhalb von Überschriften nicht kursiv, stattdessen aber in blauer Farbe dargestellt wird, während das gleiche Element innerhalb anderer HTML-Tags nach wie vor nichts anderes als eine kursive Darstellung bewirkt.
Beispiel
    h1 i {
    color:blue;
    font-style:normal;
    }
    div * b {
    color:violet;
    }
    div > p {
    color:blue;
    }
    div + p {
    margin-top:5em;
    }
Erläuterung
    Zunächst wird festgelegt, dass Textabschnitte, die mit

…

ausgezeichnet sind, nicht wie sonst üblich kursiv, sondern normal ( font-style: normal; ), stattdessen aber mit blauer Farbe (
color: blue;
) dargestellt werden. Aber nicht immer, sondern nur dann, wenn das
i
-Element innerhalb einer Überschrift 1. Ordnung (
h1
) vorkommt. Dazu notieren Sie zuerst den Namen des übergeordneten Elementtyps, im Beispiel
h1
, und dahinter, durch Leerraum getrennt, den Namen des inneren Elementtyps, im Beispiel
i
.
    Man spricht bei diesen allgemeinen Verschachtelungsangaben von Nachfahren-Selektoren . Daneben gibt es noch weitere, genauere Möglichkeiten für Selektoren-Angaben zu verschachtelten Elementen. Denn die einfache Verschachtelungsregel berücksichtigt nicht die Verschachtelungstiefe. So wird das
i
-Element auch dann blau formatiert, wenn es z. B. in dieser Form vorkommt:

…

. Das nachfolgende Beispiel berücksichtigt dagegen die Verschachtelungssituation genauer:
    div * b { color: violet; }
    Der Universalselektor
*
wird hier als Platzhalter für ein beliebiges Element und damit für eine weitere Verschachtelungsebene verwendet. Im Beispiel wird festgelegt, dass
b
-Elemente, die innerhalb eines
div
-Bereichs vorkommen, nur dann violette Textfarbe (
color: violet;
) erhalten, wenn das
b
-Element in dieser oder einer vergleichbaren Form vorkommt:

, also mindestens zwei Ebenen unterhalb des
div
-Elements.
    Dazu etwas HTML-Code:
    
    

    Textabsatz außerhalb eines div-Bereichs mit nur fettem Text
    und kursivem und dazu fettem Text.
    

    

Noch ein Textabsatz.

    Im HTML-Ausschnitt sind verschiedene Textstellen an verschiedenen Stellen mit

…

ausgezeichnet. Das erste
b
-Element in dem Text, der zuerst und direkt innerhalb des
div
-Bereichs notiert ist, erhält noch keine violette Farbe, wohl aber das nächste
b
-Element im gleichen Satz, da dieses Element bereits zwei Ebenen unterhalb des
div
-Elements liegt (das
i
-Element liegt dazwischen).
    Eine weitere Möglichkeit besteht darin, die Vererbung von Eigenschaften nach unten hin zu beschneiden.
    div > p { color:blue; }
    Mit dem Zeichen
>
wird in diesem Selektor festgelegt, dass
p
-Elemente, sofern sie innerhalb eines
div
-Bereichs vorkommen, nur dann blaue Textfarbe erhalten, wenn das
p
-Element in dieser Form vorkommt:

, also in der Ebene direkt unterhalb des
div
-Elements (als ein direktes Kind-Element