Anlegen von Klassen im Stylesheet

Zusätzlich zu dem, im Abschnitt HTML-Elemente Formatieren, beschriebenen direkten formatierten von HTML-Elementen, können Klassen definiert werden, die in beliebigen Elementen aufgerufen werden können. Diese werden mit dem vorangestellten Universalselektor *, dem anschließenden Punkt und einem nachfolgenden, frei wählbaren Begriff, der auf die Verwendung schließen lassen sollte, um in umfangreichen Stylesheets den Überblick nicht zu verlieren, in das Stylesheet geschrieben. Der Universalselektor * kann auch weg gelassen werden.

*.text {attribut:wert; attribut2:wert;}

Diese Klasse wird dann in der zu formatierenden html-, php-Datei etc. im einleitenden tag wie folgt eingebunden:

<p class="text">Hier steht der css-formatierte Absatz</p>

Formatieren von Block-Elementen (Containern) für komplexe css-Formatierung

Mit <div>-, <span> -, <strong> - und <em>- Elementen können Sie auch mit Hilfe von Klassen, wie im obigen <p> - Tag angegeben, kleinere oder größere Bereiche einer Webseite formatieren.

Der Unterschied zwischen <div>, <span>, <strong> und <em> besteht darin, dass div ein Blockelement ist und eine neue Zeile erzeugt sonst aber keine weiteren Vorformatierungen enthält, während span, strong und em Inlineelemente sind und innerhalb des Textflusses, also auch innerhalb von Blöcken ohne zusätzliche Leerzeilen oder Erzeugung neuer Zeilen als Hervorhebung verwendet werden können.

Strong und em heben sich in modernen Browsern, auch ohne zusätzliche css-Formatierung, durch Fett- oder Kursivschrift (dies ist vom verwendeten Browser abhängig) vom übrigen Fließtext ab. Um nicht auf die wage Darstellung in den unterschiedlichen Browsern zu vertrauen, können Sie <strong> und <em>, in der Form wie Sie auch <h1> formatieren, Ihre eigene Formatierung zuweisen. Für die Verwendugn von div-Blöcken oder span-inline-Elementen können Sie in einem Stylesheet Klassen anlegen. Span und em können Sie wie zuvor schon beschrieben direkt formatieren, also im Stylesheet ohne Punkt vor span oder em, oder auch vorhandene Klassen nutzen, die dann im span- oder em-tag eingebunden werden.

Beispiel Klasse für umfangreiche Formatierung eines Webseiten-Bereiches

.rot
{background-color:#F00; color:#FFF; text-align:center; width:300px; height:250px; float:left;
padding:10px; margin:20px;
font-size:12px; font-family:arial;}
Mit der oben definierten Klasse "rot" wird dieses rote Rechteck mit einer Breite von 300 Pixeln und einer Höhe von 250 Pixeln angelegt. Auf diesem Rechteck befindet sich weiße Schrift der Schriftart arial und Schriftgröße 12 Pixel die mittig ausgerichtet wird. Der Innenabstand der Schrift zu den Rändern des Rechteckes beträgt 10 Pixel, der Außenabstand des Rechteckes zu den umgebenden Elementen der Website beträgt 20 Pixel. Mit <div class="rot"> </div> kann die Klasse in der html-Datei aufgerufen werden.

Mehrspaltige Layouts anlegen

Float:left; innerhalb der Klasse "rot" definiert, sorgt dafür, dass dieser Text neben dem roten Rechteck plaziert wird. So lassen sich mehrspaltige Layouts anlegen. Nimmt der Text neben dem roten Rechteck mehr Platz in Anspruch als noch zur Verfügung steht, wird das Rechteck von diesem Text umflossen.

Auf diese Art lassen sich alle Bereiche einer Webseite formatieren. Div-Container lassen sich auch ineinander verschachteln. Hier gilt das gleiche wie auch bei anderen html-Tags. Der zuletzt geöffnete div-Container muß zuerst wieder geschlossen werden.