| # Zentrale Formate definieren
| Aufbau zentraler Formate Formate für HTML-Elemente definieren Formate für verschachtelte HTML-Elemente definieren Attributbedingte Formate definieren Formate für Klassen definieren Klassen in Verbindung mit den Elementen div und span Individualformate definieren Pseudoelemente und Pseudoklassen definieren

## Aufbau zentraler Formate

Die hier beschriebenen Möglichkeiten gelten, wenn Sie:
Formate zentral für eine HTML-Datei definieren oder
Formate zentral in separater CSS-Datei definieren

Zentrale Formate folgen einem bestimmten Grundmuster:

### Beispiel:

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    h1 { color:red; font-size:48px; }
    </style>
    </head>
    <body>
    <h1>48 Pixel und Rot!</h1>
    </body>
    </html>

### Erläuterung:

Das Beispiel enthält in einem `style`-Bereich eine Formatdefinition für `h1`-Elemente der Datei, also für Überschriften 1. Ordnung. Solche Formatdefinitionen haben immer den gleichen Aufbau und bestehen aus folgenden Teilen:

#### Selektor:

Als "Selektor" wird das bezeichnet, was vor den geschweiften Klammern steht. Der Selektor wählt aus, wofür die folgenden Definitionen gelten sollen. Im obigen Beispiel gelten die Formate für alle Überschriften 1. Ordnung (`h1`-Elemente). Es sind jedoch auch komplexere Selektoren möglich.

#### Definitionen:

Die eigentlichen Definitionen zum Format stehen stets in geschweiften Klammern `{` und `}`. Sie bestehen darin, dass eine oder mehrere CSS-Eigenschaften notiert werden und einen Wert erhalten. Im obigen Beispiel werden etwa die CSS-Eigenschaften `color` (Schriftfarbe) und `font-size` (Schriftgröße) verwendet. Der Eigenschaft `color` wird der Wert `red` zugewiesen, und der Eigenschaft `font-size` der Wert `48px`. Zwischen Eigenschaft und Wertzuweisung muss stets ein Doppelpunkt stehen. Abgeschlossen wird eine Definition mit einem Strichpunkt (`;`). Nur bei der letzten Definition vor der schließenden geschweiften Klammer darf der Strichpunkt auch entfallen.

Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe CSS-Eigenschaften.

### Beachten Sie:

Zwar sind innerhalb einer Definition durchaus Leerzeichen erlaubt, aber frühe Versionen von Netscape 4.x haben sich dabei als sehr empfindlich erwiesen und ignorieren solche Definitionen. Obwohl es nicht so gut lesbar ist, ist es deshalb besser, keine Leerzeichen innerhalb einer Definition zu verwenden. So werden Angaben wie `color:red; font-size:48px;` in jedem Fall akzeptiert, aber `color: red; font-size: 48px;` können bei einigen älteren Netscape-Versionen zu Fehlern führen.

## Formate für HTML-Elemente definieren

In einem `style`-Bereich oder in einer externen CSS-Datei können Sie für HTML-Elementtypen, zum Beispiel zu Absatztypen und Textgestaltung oder für Tabellen-Elementtypen, CSS-Formate definieren. Wenn Sie entsprechende HTML-Elemente dann in der HTML-Datei verwenden, werden alle Formate angewendet, die Sie für den Elementtyp definiert haben. So können Sie beispielsweise für Überschriften 1. Ordnung definieren, dass diese in der Schriftart Helvetica, 26 Pixel, rot, fett und kursiv mit einem Absatznachabstand von 20 Pixel angezeigt werden. Wenn Sie dann im Text der HTML-Datei eine Überschrift 1. Ordnung wie gewohnt definieren, werden diese Formateigenschaften dabei berücksichtigt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    body { background-color:#FFFFCC;
         margin-left:100px; }
    h1 { font-size:300%;
         color:#FF0000;
         font-style:italic;
         border-bottom:solid thin black; }
    p,li  { font-size:110%;
            line-height:140%;
            font-family:Helvetica,Arial,sans-serif;
            letter-spacing:0.1em;
            word-spacing:0.3em;
            color:blue; }
    </style>
    </head>
    <body>
    <h1>&Uuml;berschrift 1. Ordnung</h1>
    <p>ein normaler Textabsatz</p>
    <ul>
    <li>Ein Listenpunkt</li>
    <li>Ein anderer Listenpunkt</li>
    </ul>
    </body>
    </html>

### Erläuterung:

Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor den Namen des HTML-Elementtyps, und zwar ohne spitze Klammern. Im obigen Beispiel werden `body` (Dokument), `h1` (Überschriften 1. Ordnung), `p` (Textabsätze) und `li` (Listeneinträge) auf diese Weise notiert. Wenn Sie ein Format für mehrere HTML-Elementtypen definieren wollen, geben Sie alle gewünschten Elementtypen an und trennen Sie diese durch Kommata, so wie im obigen Beispiel `p,li`.

Es bedeutet also das gleiche, wenn Sie notieren:
`h1 { font-family:Helvetica,sans-serif; }`
`h2 { font-family:Helvetica,sans-serif; }`
oder wenn Sie notieren:
`h1, h2 { font-family:Helvetica,sans-serif; }`

Dahinter folgen die gewünschten Definitionen. Im obigen Beispiel wird dem `body`-Element eine hellgelbe Hintergrundfarbe (`background-color:#FFFFCC;`) und ein linker Randabstand von 100 Pixeln (`margin-left:100px;`) zugewiesen. Überschriften 1. Ordnung (`h1`) erhalten eine Schriftgröße von 300 Prozent (`font-size:300%;`), die 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 Schriftart Helvetica, oder wenn nicht verfügbar, dann 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`), Wortabstand (`word-spacing`) und zur Textfarbe gemacht.

Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe CSS-Eigenschaften.

## Formate für verschachtelte HTML-Elemente definieren

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 `<i>...</i>` formatiert wird, ebenfalls rot und in Times, aber zusätzlich kursiv.

Sie können mit Hilfe von Stylesheets jedoch bestimmen, dass ein HTML-Element bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Elements vorkommt. So können Sie etwa bestimmen, dass `<i>...</i>` 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:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    h1 { color:red; }
    h1 i { color:blue; font-style:normal; }
    </style>
    </head>
    <body>
    <h1>Wir lernen <i>Stylesheets</i></h1>
    <p>Wir lernen <i>Stylesheets</i></p>
    </body>
    </html>

### Erläuterung:

Im Beispiel wird festgelegt, dass Textabschnitte, die mit `<i>` ... `</i>` ausgezeichnet sind, nicht wie sonst üblich kursiv, sondern normal (`font-style:normal;`), stattdessen aber mit blauer Farbe (`color:blue;`) dargestellt werden. Aber 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`.

In der ersten Zeile innerhalb des `<body>`-Bereichs im obigen Beispiel kommt diese spezielle Definition zum Tragen. In der zweiten Zeile dagegen, wo `<i>...</i>` innerhalb eines Textabsatzes vorkommt, hat es die übliche Wirkung.

### Weitere Möglichkeiten für verschachtelte HTML-Elemente bei CSS 2.0

Ab CSS 2.0 gibt es weitere Möglichkeiten für Selektoren-Angaben zu verschachtelten Elementen:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    div i { color:red; }
    div > p { color:blue; }
    div * b { color:violet; }
    div + p { margin-top:100px; }
    </style>
    </head>
    <body>
    <div align="center">
    Text in einem div-Bereich mit <b>nur fettem Text</b> und
    <i>kursivem und <b>dazu fettem</b> Text</i>.
    <p>Textabsatz in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem
    und <b>dazu fettem</b> Text</i>.</p>
    <table border="1"><tr>
    <td><p>Textabsatz in einer Tabellenzelle.</p></td>
    </tr></table>
    </div>
    <p>Textabsatz außerhalb eines div-Bereichs mit <b>nur fettem Text</b>
    und <i>kursivem und <b>dazu fettem</b> Text</i>.</p>
    <p>Noch ein Textabsatz.</p>
    </body>
    </html>

### Erläuterung:

Die Selektoren im Beispiel haben folgende Bedeutung:

`div i { color:red; }`
Damit wird wie nach CSS-1.0-Syntax bekannt festgelegt, dass `i`-Elemente, sofern sie innerhalb eines `div`-Bereichs vorkommen, rote Textfarbe (`color:red;`) erhalten. Dabei wird das `i`-Element auch dann rot formatiert, wenn es z.B. in dieser Form vorkommt: `<div><ul><li><i></i></li></ul></div>`. Deshalb gibt es ab CSS 2.0 die Möglichkeit, genauer festzulegen, für welche Verschachtelung die Formatdefinition gelten soll.

`div > p { color:blue; }`
Mit dem Zeichen `>` wird in diesem Selektor festgelegt, dass `p`-Elemente, sofern sie innerhalb eines `div`-Bereichs vorkommen, blaue Textfarbe (`color:blue;`) erhalten. Aber nur dann, wenn das `p`-Element in dieser Form vorkommt: `<div><p></p></div>`, also eine Ebene unterhalb des `div`-Elements. Im obigen Beispiel ist innerhalb des `div`-Bereichs unter anderem auch eine Tabelle notiert, in der noch mal ein `p`-Element vorkommt. Dort greift die Formatierung der blauen Farbe nicht, weil das `p`-Element mehr als eine Verschachtelungsebene unterhalb des `div`-Elements liegt (die Tabellenelemente sind dazwischen).

`div * b { color:violet; }`
Mit dem Zeichen `*` wird in diesem Selektor festgelegt, dass `b`-Elemente, sofern sie innerhalb eines `div`-Bereichs vorkommen, violette Textfarbe (`color:violet;`) erhalten. Aber nur dann, wenn das `b`-Element in dieser oder einer vergleichbaren Form vorkommt: `<div><p><b></b></p></div>`, also mindestens zwei Ebenen unterhalb des `div`-Elements. Im obigen Beispiel sind verschiedene Textstellen an verschiedenen Stellen mit `<b>...</b>` 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).

`div + p { margin-top:100px; }`
Mit dem Zeichen `+` wird in diesem Selektor festgelegt, dass `p`-Elemente, die unmittelbar auf ein `div`-Element hin folgen, einen Abstand von 100 Pixeln nach oben hin erhalten (`margin-top:100px;`). Im obigen Beispiel ist das bei dem vorletzten `p`-Element der Fall. Dieses folgt unmittelbar hinter dem `div`-Bereich. Beachten Sie, dass die Syntax mit dem Pluszeichen nur mit Netscape 6.0 nachvollziehbar war, mit dem Internet Explorer 5.5 dagegen nicht.

Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe CSS-Eigenschaften.

### Beachten Sie:

Der Internet Explorer 6.0 interpretiert die Nachfahren-Selektoren `>` und `+` noch nicht.

## Attributbedingte Formate definieren

Mit Hilfe attributbedingter Formate können Sie in Selektoren angeben, dass Formatdefinitionen nur für Elemente mit bestimmten Attributen oder sogar nur für Elemente mit bestimmten Wertzuweisungen an Attribute gelten sollen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    p { font-weight:bold; font-family:Tahoma,sans-serif; font-size:1.2em; }
    p[align] { color:red; }
    p[align=center] { color:blue; text-align:left; }
    td[abbr~=Berlin] { background-color:#FFFF00 }
    *[lang|=en] { background-color:#FF0000; color:#FFFFFF; }
    </style>
    </head>
    <body>
    <p>Das ist ein Textabsatz, ein stinknormaler.</p>
    <p align="right">Das ist ein Textabsatz, rechts ausgerichtet.</p>
    <p align="center">Das ist ein Textabsatz, zentriert? Wirklich zentriert?</p>
    <table border="1"><tr>
      <th>Berlin</th>
      <th>Hamburg</th>
    </tr><tr>
      <td abbr="Es folgen Infos zu Berlin">Eine Menge Inhalt zu Berlin</td>
      <td abbr="Es folgen Infos zu Hamburg">Eine Menge Inhalt zu Hamburg</td>
    </tr></table>
    <p>Ein Textabsatz <span lang="fr">avec</span> Text <span lang="en">about</span> einen <span lang="en-US">English man in New York</span></p>
    </body>
    </html>

### Erläuterung:

In dem Beispiel ist zunächst eine Formatdefinition für alle `p`-Elemente notiert. Dann folgen jedoch zwei weitere Formatdefinitionen - ebenfalls für `p`-Elemente, aber nur für solche, die ein Attribut `align` haben. Mit der Syntax `p[align]` werden alle `p`-Elemente erfasst, die ein `align`-Attribut haben. Mit `p[align=center]` werden alle `p`-Elemente erfasst, die ein `align="center"` im einleitenden Tag haben. Mit `td[abbr~=Berlin]` werden alle Tabellenzellen des Typs `td` erfasst, die ein Attribut `abbr` besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort Berlin vorkommt. Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten Wörtern in Wertzuweisungen an Attribute. Mit `*[lang|=en]` schließlich werden alle Elemente (der Stern ist das Platzhalterzeichen für "alle Elemente" und wird als "Universalselektor" bezeichnet) erfasst, die ein Universalattribut `lang` mit einem Wert, der mit `en` beginnt aufweisen und danach eventuell einen Bindestrich enthalten (wie `en` oder `en-US`).

### Beachten Sie:

Der Internet Explorer 6.0 interpretiert Attribut-Selektoren noch nicht.

## Formate für Klassen definieren

Sie können Formate für Klassen definieren. Anwenden können Sie solche Klassen in HTML mit dem Universalattribut `class`. So können Sie beispielsweise für Überschriften 1. Ordnung zwei Varianten erzeugen. Dazu vergeben Sie Namen für die Klassen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    h1 { font-family:Arial,sans-serif; font-size:2em; font-weight:normal; }
    h1.hinterlegt { background-color:#FFFF00 }
    *.hinterlegt { background-color:#00FFFF }
    .extra { background-color:#FF99FF }
    .extra.hinterlegt { background-color:#FF0000 }
    </style>
    </head>
    <body>
    <h1>H1 ganz normal nur etwas formatiert</h1>
    <h1 class="hinterlegt">H1 knallgelb hinterlegt</h1>
    <h2>H2 ganz normal, <span class="hinterlegt"> aber <b class="extra">auch</b> hinterlegt</span></h2>
    <h3 class="extra hinterlegt">H3, extra hinterlegt</h3>
    </body>
    </html>

### Erläuterung:

Es gibt zwei Möglichkeiten, Klassen für HTML-Elemente zu notieren: entweder für einen bestimmten HTML-Elementtyp, oder für keinen bestimmten. In jedem Fall bestimmen Sie eine Formatdefinition für eine Klasse, indem Sie im Selektor einen Punkt notieren und unmittelbar dahinter einen Namen für die Klasse angeben. Im obigen Beispiel wird mit `h1.hinterlegt` eine Klasse namens `hinterlegt` angesprochen, die aber nur für HTML-Elemente vom Typ `h1` gilt: also z.B. auf HTML-Elemente wie `<h1 class="hinterlegt">` anwendbar ist. Mit `*.hinterlegt` wird im Beispiel demonstriert, dass Sie durchaus den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden können. Der Stern gilt als Universalselektor und bedeutet so viel wie "für alle Elemente". Er kann auch ganz entfallen. Im Beispiel `.extra` können Sie das sehen. Ein `h1`-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor `h1.hinterlegt` bestimmt werden. Ein `p`-Element mit `<p class="hinterlegt">` erhält dagegen die Formatierungen, die mit `*.hinterlegt` bestimmt werden. Es ist auch möglich, ausschließlich Elemente zu selektieren, die mehrere Klassennamen aufweisen. Notieren Sie in diesem Fall beide Klassenselektoren direkt hintereinander.

Die Namen hinter dem Punkt können Sie frei vergeben, sie dürfen jedoch

- keine Leerzeichen und deutsche Umlaute enthalten,
- nicht mit einer Ziffer oder einem Bindestrich beginnen
- und sollten keinen Unterstrich enthalten und nicht zu lang sein.

## Klassen in Verbindung mit den Elementen div und span

Die beiden HTML-Elemente div und span haben besondere Bedeutung für Stylesheets. Der Grund ist, dass sie selber relativ eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das `div`-Element eine neue Zeile im Textfluss erzwingt, während `span` innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt. Wenn Sie mit diesen Elementen arbeiten, können Sie Probleme vermeiden, die sich aus den im Browser voreingestellten Eigenschaften bestimmter Elemente ergeben. So haben beispielsweise Überschriften bei der Darstellung im Browser bestimmte Vor- und Nachabstände, die von Browser zu Browser recht verschieden sein können. Wenn Sie das Aussehen solcher Elemente kontrollieren wollen, benötigen Sie CSS-Formatdefinitionen nicht selten dazu, um einfach nur die automatischen Voreinstellungen der Browser für solche Elemente zu korrigieren. Bei den Elementen `div` und `span` können Sie dagegen fast wie auf einer "tabula rasa" aufsetzen.

Das folgende Beispiel zeigt, wie Sie mit CSS, Klassen und allein mit diesen beiden eigenschaftslosen HTML-Elementen arbeiten können.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    .body { background-color:#EEEEFF; }
    .chap { font-family:Arial,sans-serif; font-size:175%; color:blue;
          border-bottom-style:solid; border-bottom-width:3px; border-color:red;
          margin:0px; margin-bottom:16px; }
    .sect { font-family:Arial,sans-serif; font-size:130%; color:blue;
          border-bottom-style:solid; border-bottom-width:3px; border-color:red;
          margin:0px; margin-top:24px; margin-bottom:16px; }
    .p  { font-family:Arial,sans-serif; font-size:105%; color:black; margin-top:6px; margin-bottom:6px; }
    .red   { color:red }
    .blue  { color:blue }
    .bold  { font-weight:bold }
    .big   { font-size:140% }
    .small { font-size:60%; font-family:'Small Fonts',sans-serif; }
    </style>
    </head>
    <body>
    <div class="chap">Eine Kapitelüberschrift</div>
    <div class="p">Eine Textabsatz, dessen Klasse genau so heißt wie ein HTML-Element :-)</div>
    <div class="p">Und damit man auch alles sieht, gleich noch einer davon</div>
    <div class="sect">Eine Sektionsüberschrift</div>
    <div class="p">Absatz mit <span class="red">rotem und <span class="bold">fettem</span></span> Text</div>
    <div class="p">Absatz mit <span class="big">großem</span> und <span class="small">kleinem</span> Text</div>
    </body>
    </html>

### Erläuterung:

Im `style`-Bereich des Beispiels werden Klassen für beliebige Elemente definiert, die diese Klassen mit `class="chap"`, `class="sect"` usw. verwenden können und damit die entsprechenden Formate annehmen.

Im sichtbaren Bereich der Datei, also zwischen `<body>` und `</body>`, sind ausschließlich Elemente der Typen `div` und `span` notiert. Durch die Verwendung des `class`-Attributs "simulieren" diese Elemente gewissermaßen typische Auszeichnungselemente wie Kapitelüberschriften, Textabsätze und Formatierungen innerhalb des Textes.

Nun kann man darüber streiten, ob diese Art zu arbeiten nicht eine Vergewaltigung der Idee von HTML darstellt, der Idee nämlich, ein Set wichtiger und für normalen Text typischer Auszeichnungselemente bereitzustellen, damit durch deren einheitliche Verwendung auch eine "webweit" einheitliche Semantik bei der Textauszeichnung erreicht wird. Andererseits ist Semantik immer auch gegeben, wenn man Elemente regelgerecht, aber nach eigenen Vorstellungen für Bedeutung auszeichnet. Denn vielleicht will man ja unter der Bedeutung der Klassen `chap` und `sect` im Beispiel etwas anderes verstehen als einfach unter dem, was die HTML-Elemente `h1` und `h2` bedeuten. Die eigenschaftslosen Elemente `div` und `span` eignen sich ja beispielsweise auch hervorragend dazu, in Verbindung mit Klassennamen wie `Romeo` und `Julia` Rollentexte eines Theaterstücks zu markieren. Insofern sind `div` und `span` in Verbindung mit Klassennamen gar nicht mehr weit entfernt von den semantischen Konzepten, die mit XML verfolgt werden.

## Individualformate definieren

So wie Sie Formate für Klassen definieren können, die in HTML mit dem Universalattribut `class` angesprochen werden, können Sie auch Formate definieren, die über das Universalattribut `id` angesprochen werden. Da die Wertzuweisung an ein solches Attribut ein dokumentweit eindeutiger Name sein sollte, handelt es sich also einfach um eine zentrale Formatdefinition für das eine Element mit diesem id-Namen. In CSS werden die id-Namen allerdings nicht nur wie beispielsweise in JavaScript als dokumentweit eindeutige Bezeichner betrachtet, sondern auch als elementtypweit eindeutige Bezeichner.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    #roterBereich {
       position:absolute;
       top:130px;
       left:30px;
       width:320px;
       padding:10px;
       margin:0px;
       border:4px solid #EE0000;
    }
    #blauerBereich {
       position:absolute;
       top:130px;
       left:400px;
       width:320px;
       padding:10px;
       margin:0px;
       border:4px solid #0000EE;
    }
    h1#Titel {
       font-family:Arial,sans-serif;
       font-size:2em;
       font-weight:normal;
       color:green;
    }
    </style>
    </head>
    <body>
    <h1 id="Titel">Diese &Uuml;berschrift und zwei positionierte Bereiche</h1>
    <div id="roterBereich"><h1>Der rote Bereich</h1></div>
    <div id="blauerBereich"><h1>Der blaue Bereich</h1></div>
    </body>
    </html>

### Erläuterung:

In dem Beispiel werden drei Individualformate definiert: zunächst einmal zwei Individualformate mit den Namen `#roterBereich` und `#blauerBereich`. Solche Formate beginnen also mit dem Gatterzeichen `#`, gefolgt von dem Namen. Ein HTML-Element, das diesen Namen als Wertzuweisung an das `id`-Attribut benutzt, bekommt dann die entsprechenden Formate zugewiesen. Das obige Beispiel zeigt einen typischen Anwendungsfall für Individualformate, nämlich das Definieren von Formaten für absolut positionierte Bereiche (`position:absolute;`).

Weiterhin wird ein Individualformat mit dem Selektor `h1#Titel` definiert. Das ist eine Syntax, die erst seit CSS 2.0 zur Verfügung steht. Dabei wird vor dem Gatterzeichen, das ein Individualformat kennzeichnet, ein HTML-Elementtyp notiert, im Beispiel also `h1` für Überschriften erster Ordnung. Hinter dem Gatterzeichen dann wieder der Name des Individualformats. Im Beispiel wird die Formatdefinition nur dann angewendet, wenn es in der HTML-Datei ein `h1`-Element mit dem Attribut `id="Titel"` gibt. Wenn es dagegen etwa ein Element `div` mit `id="Titel"` gäbe, würde die Formatdefinition dort ignoriert.

### Beachten Sie:

Individualformate mit vorangestelltem Elementtyp werden von Internet Explorer 5.x und Netscape 6.0 erkannt, nicht aber von älteren Versionen.

## Pseudoelemente und Pseudoklassen definieren

Mittels Pseudoklassen und Pseudoelementen können Sie Deklarationen für HTML-Bestandteile definieren, die sich nicht durch ein eindeutiges HTML-Element ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der "erste Buchstabe eines Absatzes". Zum Definieren solcher Pseudoelemente und Pseudoklassen gibt es eine spezielle Syntax.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
     body { font-family:Arial,sans-serif; }
     a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
     a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
     a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
     a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }
     a:focus { color:#00AA00; background-color:#FFFF77; font-weight:bold; }
    </style>
    </head>
    <body>
    <p>
    Vermutlich kennen Sie die <a href="../../index.htm">Kapiteleinstiegsseite zu CSS</a><br>
    Und wohl auch die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a><br>
    Aber kennen Sie auch die <a href="../../../intro/hypertext/geschichte.htm">Geschichte von Hypertext</a>?<br>
    Oder die <a href="../../../xml/regeln/baumstruktur.htm">Baumstruktur einer XML-Datei</a>?
    </p>
    </body>
    </html>

### Erläuterung:

Bei Pseudoelementen und Pseudoklassen notieren Sie zuerst das betroffene HTML-Element, im Beispiel das `a`-Element für Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa `link` (für noch nicht besuchte Verweisziele), `visited` (für bereits besuchte Verweisziele), `hover` (für Verweise, während der Anwender mit der Maus darüber fährt), `active` (für angeklickte Verweise) und `focus` (für z.B. mit der Tastatur ausgewählte Verweise). Beachten Sie, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter.

Es gibt eine Reihe fester, erlaubter Pseudoelemente und Pseudoklassen. Diese werden werden im Zusammenhang mit den CSS-Eigenschaften im Abschnitt über Pseudoelemente und Pseudoklassen beschrieben.

| HTML-Elemente direktformatieren
| Stylesheets in HTML einbinden

© 2005 Impressum