CSS - Style-Angaben - Formatierung im Webdesign

Ursprünglich wurden die einzelnen Elemente einer Webseite mit Hilfe von Attributen direkt im html-Tag formatiert. Eine schnelle Änderung des Layouts war so aber nicht möglich. Jede einzelne Formatierung mußte im Quelltext gesucht und geändert werden. Das konnte, vor allem bei Websites größeren Umfanges, sehr zeitaufwendig sein.

Um das Layout einer kompletten Webite getrennt vom html-Quellcode jeder einzelnen Unterseite leicht bearbeiten zu können, werden nun css-Anweisungen in externe Stylesheets geschrieben oder inline-Styles im head der zu formatierenden Datei angelegt. Eine weitere Möglichkeit css-styles anzuwenden bietet der direkte Eintrag im einleitenden Tag des zu formatierenden html-Elements. Dies sollte aber nur die Ausnahme sein, weil bei einer Formatierung per css direkt am Element der Vorteil der schnellen Aktualisierung verloren geht.

Vom Tabellenlayout zur CSS-Formatierung

Eine Formatierung in css hat aber nicht nur Vorteile sondern bringt auch einige Unannehmlichkeiten mit sich. Ältere Browser können nur sehr wenige bis gar keine css-Anweisungen umsetzen und so taten sich in der Vergangenheit viele Webdesigner schwer komplett auf Layouts in css umzustellen, wollten sie doch verständlicherweise nicht riskieren, dass Ihr Layout in einigen Browsern schlecht dargestellt wird oder die Website vielleicht gar nicht benutzt werden kann. Inzwischen kommen aber mit diesen alten Browsern nur noch sehr wenige Besucher und auch für diese gibt es Lösungen, sodass diese Besucher mit alten Browsern den Inhalt der Webseiten zumindest gut lesen können auch wenn das Design nicht den Wünschen des Webdesigners entspricht.

Aber auch die Browser der neueren Generation sind nicht fehlerfrei und setzen nicht alle Anweisungen gleich um, was es dem Webdesigner nicht unbedingt leicht macht, sich für ein komplettes Layout in css zu entscheiden. Die einzelnen Elemente einer Website über css zu formatieren klappt schon seit geraumer Zeit ganz gut, aber ganz ohne den stützenden Rahmen einer Tabelle auszukommen, in dem die Hauptelemente wie Navigation, Kopf, Fuß und Hauptinhalt der Webseiten gut positioniert werden können, erfordert schon etwas Überwindung. Auch hier ist es wie überall im Leben - aller Anfang ist schwer. Haben Sie sich erst einmal dazu durchgerungen css einzusetzen, findet sich auch hier für fast alles eine Lösung. Können Sie sich noch nicht dazu entschließen komplett auf css umzustellen ist dies kein Beinbruch. Beginnen Sie einfach mit der Formatierung der einzelnen Elemente der Website. Im Laufe der Zeit werden Sie die Vorzüge der css-Formatierung sicher zu schätzen wissen und sich auch an aufwendigere Layouts, ganz in css wagen.

Externe Stylesheets anlegen und aufrufen

Externe Stylesheets werden mittels

im head der html-Datei eingebunden und die im Stylesheet vorgenommenen Formatierungen werden jetzt der aufrufenden Datei zugänglich gemacht. Diese Anweisung verstehen auch viele alte Browser wie beispielsweise der Netscape 4.x, der bei der css-Formatierung einiges an Nerven kosten kann. Die anweisung.css wird in einem normalen Texteditor zunächst als leere Datei ohne jeglichen einleitenden Quellcode angelegt. Jetzt werden einfach alle css-Anweisungen, die auf die gesamte Website angewendet werden sollen in dieser Datei gelistet. Html-Elemente wie body, p, td oder ähnliches werden in der Art:

notiert.

Anlegen von Klassen im Stylesheet und Aufrufen dieser Klassen in der darstellenden Webseite

Zusätzlich zu den bereits im vorigen Abschnitt formatierten html-Elementen können beliebige Klassen definiert werden. Diese werden mit einem vorangestellten Punkt und einem nachfolgenden Begriff, der auf die Verwendung schließen lassen sollte, um in umfangreichen Stylesheets den Überblick nicht zu verlieren, in das Stylesheet geschrieben.

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

Anlegen 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

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.