von Thomas Salvador.
Es gibt drei Möglichkeiten, CSS in HTML einzubinden.
Definitionen werden in einer separaten Datei gemacht und im HTML Kopf nur eingebunden. Dies ist die häufigste Variante für allgemeine dokumentübergreifende Festlegungen für ganze Sites, da die Wiederverwendung zum einen die Wartbarkeit erhöht und zum anderen die Nutzung beschleunigt, da es nur einmal zum Besucher übertragen werden muss und dort dann zwischengespeichert ist.
CSS Datei:
h1,h2,h3,h4,h5,h6 {color: blue; font-family:arial;}
h2 {color: green}
HTML Datei:
<html> <head> <link rel="stylesheet" href="css-datei.css"/> </head> <body> <h1>Das Dokument</h1> <h2 style="text-align:center; color:red">Sein Inhaltsverzeichnis</h2> <h2>Einführung</h2> </body> </html>
Im HTML Kopf wird die separate CSS mit dem link-Tag eingebunden. Es definiert Blau und Arial als Attribute für alle Überschriften, ändert dann jedoch die Farbe von Überschriften der Stufe 2 auf grün. Arial wirkt auch weiterhin als Zeichensatz für h2. Durch Kombination und teilweise Überschreibung von Attributen erreicht man recht kompakte und gut wartbare Formatierungsanweisungen.
Im HTML Body wird es nun angewendet. Es werden eine Überschrift der Stufe 1 und zwei der Stufe 2 gesetzt.
Durch das CSS wird die h1-Überschrift Blau dargestellt. Die Überschrift zum Inhaltsverzeichnis ist rot und zentriert, da es dort explizit im style-Attribut gefordert ist. Die danach folgende Überschrift zur Einführung ist grün, wie im zweiten Style-Tag im Kopf gefordert.
Dort legt sie allgemeine Darstellungen fest. Diese überschreiben im Code vorher getroffene Definitionen und können von späteren überschrieben werden.
<html> <head> <style type="text/css"><!-- h1,h2,h3,h4,h5,h6 {color: blue; font-family:arial} //--> </style> <style type="text/css"><!-- h2 {color: green} //--> </style> </head> <body> <h1>Das Dokument</h1> <h2 style="text-align:center; color:red">Sein Inhaltsverzeichnis</h2> <h2>Einführung</h2> </body> </html>
Das Ergebnis entspricht dem vorherigen. Nur werden hier die Definitionen direkt im Dokument eingefügt, so dass Änderungswünsche dazu führen, dass alle Dokumente überarbeitet werden müssen.
Die direkt Festlegung am einzelnen Tag wurde bereits in den Beispielen gezeigt und ist die stärkste Bindung. Sie überschreibt ggf. allgemeinere Festlegungen.
<h2 style="text-align:center; color:red">Inhaltsverzeichnis</h2>
erzeugt eine Überschrift der Stufe 2, deren Text zentriert und in Rot dargestellt wird. Unabhängig davon, was andere Festlegungen sagen.
Auch werden nur und ausschließlich diese Attribute geändert. Daher gilt in den vorherigen Beispielen auch weiterhin Arial als Zeichensatz. Nutzen wir hier zum Beispiel nur dieses Fragment, so würde die Überschrift zwar rot und zentriert, aber in Standardschrift dargestellt, da wir hier keine andere Schriftart festlegen.
Insgesamt betrachtet sind zentrale Einstellungen für die ganze Site in einer separaten, zentralen CSS-Datei am besten aufgehoben, die in die Seiten eingebunden wird. Spezielle Anforderungen einer einzelnen Seite können entweder durch weitere separate Dateien umgesetzt werden, die nur dort eingebunden sind, oder mit Definitionen im Kopf der betroffenen Seite oder am betroffenen Element selbst umgesetzt werden.
Legen Sie also zunächst eine zentrale CSS-Datei an, die Sie dann in Ihre HTML Dokumente einbinden.