Cascading Style Sheets (CSS) stellen eine Formatierungssprache dar, welche die Textstruktur von HTML um das Layout ergänzt. Meist lagert man die Formatierungsanweisungen in eine separate CSS-Datei aus. Hierdurch wirkt sich eine Änderung in der externen CSS-Datei auf alle HTML-Seiten gleichermaßen aus, was den Pflegeaufwand erheblich reduziert. So kann man schnell mal die Hintergrundfarbe ändern, ohne sämtlich Seiten einzeln zu bearbeiten.
Einbindung einer externen CSS-Datei in eine HTML-Datei:
Im Head-Bereich der HTML-Datei fügt man folgenden Quellcode ein:
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
Die CSS-Datei "style.css" ist eine Textdatei mit der Dateiendung .css und befindet sich im selben Verzeichnis, wie die entsprechende HTML-Datei.
Formaler Aufbau (Syntax) einer CSS-Anweisung:
Selektor {Eigenschaft:Wert;}
1. Selektor: HTML-Element z. B. H1
2. Eigenschaft: z. B. COLOR
3. Wert: z. B. Farbname z. B. blue
Werte können Schlüsselwörter, Längen-, Prozent- oder Farbwerte sowie URLs sein.
Beispiel: H1 {color:blue;}
Durch diese Anweisung werden alle in der HTML-Datei mit <H1> ausgezeichneten Überschriften blau dargestellt.
Die wichtigsten CSS-Eigenschaften für die Schriftformatierung:
| Format | CSS- Eigenschaft | Beispiel |
|---|---|---|
| Schriftart | font-family | font-family: Arial, Helvetica, sans-serif; |
| Schriftgröße | font-size | font-size: 80%; |
| Zeilenabstand | line-height | line-height: 140%; |
| Schriftfarbe | color | color: red; |
| Hintergrundfarbe | background | background: grey; |
| Schriftgewicht | font-weight | font-weight: bold; |
| Textdekoration | text-decoration | text-decoration: underline; |
| Horizontale Ausrichtung | text-align | text-align: center; |
| Vertikale Ausrichtung | vertical-align | vertical-align: top; |
| Rahmen | border | border: 1px solid black; |
| Außenabstand | margin | margin: 10px; margin: 5px 10px 5px 20px; (oben rechts unten links) |
| Innenabstand | padding | padding: 10px; padding: 5px 10px 5px 20px; (oben rechts unten links) |