Wenn man z.B. ein StyleSheet <p>-Tag definiert,
so gilt dieses für alle <p>-Tags in der Web-Seite.
Das ist manchmal garnicht so praktisch.
Deshalb kann man Formatierungen für eigene "Klassen" oder für "IDs" festlegen,
und die <Tags> mit Hilfe eines class-Attributs bzw. eines
id-Attributs zusätzlich klassifizieren:
.wichtig {color:red; font-style:italic; font-weight:bold; font-size: larger;}#wichtig {color:red; font-style:italic; font-weight:bold; font-size: larger;}
Zur Unterscheidung von Tags erhalten die Klassen einen Punkt vor dem Namen, die ID's ein #-Zeichen.
Der Abschnitt bzw. Ausdruck, der dann entsprechend dargestellt werden soll,
erhält das Attribut class mit dem Namen der Klasse bzw.
das Attribut id mit dem Namen der ID:
<p class="wichtig">Ein wichtiger Abschnitt</p><p id="wichtig">Ein wichtiger Abschnitt</p>
Ein wichtiger Abschnitt
<p> Ein wichtiger <span class="wichtig;"> Ausdruck </span><p> Ein wichtiger <span id="wichtig;"> Ausdruck </span>
Ein wichtiger Ausdruck
Im Unterschied zu Klassen darf man das ID-Attribut nur 1x pro Web-Dokument verwenden, ähnlich wie Anker (Textmarken). Das Element mit ID-Attribut kann z.B. in einem Java-Script adressiert werden.
Mit Formatdefinitionen in Klassen lassen sich recht geschickt gleichförmige (Tabellen)-Einträge gestalten:
Definiert die Art der Rahmenlinie - entweder für den kompletten Rahmen oder für jede Seite einzeln:
none keine Rahmenlinie
hidden keine Rahmenlinie
dotted gepunktete Rahmenlinie
dashed gestrichelte Rahmenlinie
solid durchgezogene Rahmenlinie
double doppelte Rahmenlinie
groove 3D-Effekt
rigde 3D-Effekt
inset 3D-Effekt eingedrückt
outset 3D-Effekt aufgesetzt
Definiert die Farbe der Rahmenlinie - entweder für den kompletten Rahmen oder für jede Seite einzeln:
pink Rahmenfarbe pink
red green Rahmenfarbe rot und grün
red green orange Rahmenfarben rot grün orange
red green orange blue Rahmenfarben rot grün orange blau
Definiert die Dicke der Rahmenlinie - entweder für den kompletten Rahmen oder für jede Seite einzeln:
thin Rahmenlinie dünn
medium Rahmenlinie mittel
thick Rahmenlinie dick
3px Dicke der Rahmenlinie in Pixel
0.2em Dicke der Rahmenlinie in Ems
thin thick Rahmenfarbe dünn und dick
1px 2px 3px Rahmenfarben 1, 2 und 3 Pixel
1px 2px 3px 4px Rahmenfarben 1,2,3 und 4 Pixel
Definiert alle Werte der Rahmenlinie - entweder für den kompletten Rahmen oder für jede Seite einzeln:
red groove 10px Rahmenlinie rot, 3D-Effekt, 10 Pixel
blue double 8px Rahmenlinie unten: blau, doppelt, 8 Pixel
Die obige Beschreibung der border-Attribute wurde mit folgenden Anweisungen erstellt:
<div class="Eintrag">
<h3 ... Headline ... </h3>
<p> ... Erklärungstext ... </p>
<div class="ul">
<samp> ... Beispiel ... </samp>
<code> ... Wert ... </code>
<dfn> ... Bedeutung ... </dfn>
</div>
</div>
Die zugehörige Formatierung ist in folgenden Style-Sheets hinterlegt:
.Eintrag { border:1px outset gray; margin:1em; padding:1em; background-color:#efd;}
.Eintrag h3 {padding:0.5em; color:orange; background:#888;}
.Eintrag code {color:darkred; font-weight:bold; font-size:larger;}
.Eintrag dfn {color:grey;font-size:smaller;}
.Eintrag samp {font-size:60%; color:#444;}
Damit wurde für ein HTML-Element, das das Attribut class="Eintrag" trägt
und dessen Unter-Elemente <h3> und <samp>
sowie für die im Element <ul> enthaltenen Abschnitte
<code> und <dfn> die Formatierung festgelegt.
Da dem Element <div> das Attribut class="Eintrag">
zugewiesen wurde, gelten diese Formatierungen für entsprechenden Unter-Elemente.
Achtung: Bei den Class-Namen auf Groß- und Kleinschreibung achten!