Der eigentliche Vorteil von CSS kommt aber dann zum Tragen, wenn in einem Text mehrere Elemente auf die gleiche Art formatiert werden sollen. Ohne CSS oder mit CSS in der ausschließlich lokalen Variante müssten die Formatierungsanweisungen an jedes gewünschte Textelement neu angefügt werden – eine umständliche Aufgabe. Soll zu einem späteren Zeitpunkt die Formatierung geändert werden, hat man noch mehr Arbeit, da der HTML-Code an vielen Stellen modifiziert werden muss. Um diese Probleme zu umgehen, können CSS-Formatierungsanweisungen auch global, also an einer zentralen Stelle notiert werden; dies kann entweder im HTML-Dokument selbst erfolgen oder aber in einem eigenen Dokument, welches über eine spezielle Anweisung mit dem zu formatierenden HTML-Dokument verknüpft wird.
Die Einbettung in das HTML-Dokument selber kann im Kopf des Dokumentes mit Hilfe des style-Tags (in Analogie zur style-Eigenschaft) erfolgen, in welchem der CSS-Code notiert wird. Der CSS-Code besteht dabei aus einer Folge von Namen für Textbausteinen (also zum Beispiel das p für Absätze oder h1 für Überschriften auf oberster Ebene) mit einer zugeordneten Formatierung. Die Beispiel-Formatierung von oben könnte also folgendermaßen notiert werden (diesmal das komplette HTML-Dokument):
<head>
<style type=”text/css”>
p { font-weight : bold;font-style : italic; color:red; }
</style>
</head>
<body>
<p>Dies ist ein Absatz.</p>
<p>
Dieser Absatz hat die gleiche Formatierung.
</p>
</body>
</html>
Das resultierende Dokument würde dann so aussehen:
Dies ist ein Absatz.
Dieser Absatz hat die gleiche Formatierung.
Man kann also mit einer einzigen Formatierungs-Anweisung problemlos mehrere Textbausteine formatieren – praktisch! Jetzt möchte man allerdings natürlich nicht, dass immer alle Textbausteine einer Art auf eine bestimmte Art formatiert werden; immerhin gibt es nur einen Baustein für Absätze (für pingelige: gut, zwei mit dem div-Element) und man möchte unter Umständen eben nicht alle Absätze gleich formatieren. Zu diesem Zweck erlaubt CSS auch die Definition von Klassen, mit deren Hilfe die Formatierung von Textelementen eingeschränkt werden kann, da nur diejenigen Elemente formatiert werden, die einer bestimmten Klasse entsprechen. Klingt kompliziert? Hier ein Beispiel:
<head>
<style type=”text/css”>
p.mark { font-weight : bold;font-style : italic; color:red; }
</style>
</head>
<body>
<p class=”mark”>Dies ist ein Absatz.</p>
<p>
Dieser Absatz ist nicht formatiert.
</p>
</body>
</html>
Die Klasse hier heißt mark und die Notation p,mark bedeutet, dass nur Absätze der Klasse mark (markiert durch <p class=”mark”>) formatiert werden. Das Ergebnis sieht entsprechend so aus:
Dies ist ein Absatz.
Dieser Absatz ist nicht formatiert.
Da eine Website naturgemäß aus mehreren Webpages besteht (die Website bezeichnet den gesamten Internetauftritt, zum Beispiel Scienceblogs im Allgemeinen, und Webpage oder Internetseite/Webseite bezeichnet ein einzelnes Dokument, etwa diesen Artikel hier – das wird gern verwechselt), die alle der gleichen Formatierung folgen sollen, ist es gemeinhin sinnvoll, die CSS-Definitionen in eine externe Datei auszulagern und in allen Webpages einer Website einzubinden. Statt also im Kopf einer Webpage die CSS-Formatierungsanweisungen zu notieren, schreibt man sie in eine externe Datei – zum Beispiel format.css und bindet diese dann über folgenden Code ein:
<head>
<link rel=”stylesheet” type=”text/css” href=”format.css” />
</head>
<body>
<p class=”mark”>Dies ist ein Absatz.</p>
<p>
Dieser Absatz ist nicht formatiert.
</p>
</body>
</html>
Jede Änderung an der CSS-Datei hat jetzt zur Folge, dass automatisch alle Webpages, welche die CSS-Datei benutzen, neu formatiert werden – eine praktische Möglichkeit, um einerseits alle Webpages einer Website in einem einheitlichen Design zu halten und andererseits Änderungen am Design schnell und vor allem sicher in alle Webpages zu propagieren. Durch einen Austausch der CSS-Datei ist es zudem möglich, temporär ein anderes Design für eine Website einzuführen – wenn etwa zur Weihnachtszeit alles hübsch festlich dargestellt werden soll; danach kann die originale CSS-Datei wieder verwendet und somit das originale Design ohne Umstände wiederhergestellt werden. CSS ist de facto auch der Standard bei der Formatierung von Websites – kaum ein Webentwickler wird daran vorbeikommen (für die Kenner: abgesehen von den Entwicklern von Flash-Sites natürlich).
Kommentare (22)