Home | Lehre | Videos | Texte | Vorträge | Software | Person | Impressum, Datenschutzerklärung | Blog RSS

Stile und Stilvorlagen in HTML: Cascading Stylesheets

Zu Fuß lokal den Stil verstellen:

normal <span style="color:aqua; font-size:130%">Waaaaasser!!</span> normal

Was kann man alles wie einstellen: zum Beispiel mit Style Assistant zusammenklicken (gratis). Oder in die Standardpapiere gucken.

Dezentrale Änderungen lassen sich nicht zentral verwalten -- wie in Textverarbeitung/DTP-Software à la RagTime. Besser dem Text nur eine Beschreibung mitgeben, was er ist (Überschrift, betont, weniger wichtig usw.) und zentral einstellen, wie das jeweils aussehen soll. Solche Stilvorlagen für HTML heißen Cascading Stylesheets. (Warum "Cascading"? Nachher!)

CSS gibt es derzeit in zwei Versionen: CSS1 und CSS2. Lieber nur CSS1 verwenden, sonst sieht die Hälfte der Benutzer Murks. Und mit diversen Browsern testen. Und online prüfen lassen.

Die Stilvorlagen können im Kopf <head>...</head> der HTML-Datei stehen:

<style type="text/css">
<!--
h1 {color:red; font-size:24px;}
h2 {font-family: Verdana, sans-serif; font-weight:bold;}
-->
</style>

Soll heißen: Überschriften erster Ordnung sind rot und 24 Pixel groß etc.

Um einen Satz von Stilvorlagen für eine komplette Sammlung von HTML-Dateien zu verwenden, kann man die Stilvorlagen in eine eigene, zentrale Datei schreiben. Zum Beispiel Stylesheet Assistant erzeugt solche Dateien. Oder einfach Folgendes in eine Textdatei schreiben und mit einem Namen wie bunt.css speichern.

h1 {color:red; font-size:24px;}
h2 {font-family: Verdana, sans-serif; font-weight:bold;}

Um diese Stilvorlagen in den HTML-Dateien zu benutzen, im Kopf  <head>...</head> einfügen:

<link rel="stylesheet" href="bunt.css" type="text/css">

Gegebenfalls die URL (bunt.css) anpassen, je nachdem, wo die die CSS-Datei und die HTML-Dateien liegen.

Für fett und kursiv die Tags <strong>...</strong> und <em>...</em> verwenden und mit Stilen belegen.

Warum Cascading Stylesheets? Die können aufeinander aufbauen, vergleiche die Vererbung in RagTime:

p {font-family: Verdana, sans-serif; font-size:12px;}
p.einzug {text-indent: 2em;}
p.klein {font-size:8px;}

p.einzug ist wie p, hat aber einen Einzug. Und p.klein hat eine andere Schriftgröße. Die Namen solcher Unterklassen (einzug, klein) darf man sich selbst ausdenken. Aufruf:

<p>normaler Absatz</p>
<p class="einzug">Absatz mit Einzug</p>
<p class="klein">Absatz in winziger Schrift</p>

Das Kaskadieren geht auch gemischt:

h1, h2 {color:red; font-size:24px;}
h2 {font-size:12px;}

Lies: Überschriften ersten und zweiten Grads sind rot, aber die zweiten Grads sind nur 12 Pixel groß.