ENDLICH wirds bunt - Seiten schicker machen mit CSS

Hier geht's direkt zum Video-Kurs.

Grundidee: Trennung von Inhalt und Präsentation

Syntax eines CSS-Eintrages:

Für wen {
Eigenschaft1: Wert1 ;
Eigenschaft2: Wert2 ;
}

Anders gesagt: Selektor {Deklaration; Deklaration;}

Zum Beispiel: h2 { color: red; }

Erklärung: Alles, was das Tag h2 hat, also alle Überschriften zweiter Ordnung, bekommen die Schriftfarbe rot.

Achtung: Semikolon nicht vergessen!

Weiteres Beispiel: Der Hintergrund des gesamten Dokuments soll in einem hellen Grau dargestellt werden.

body { background-color: grey; }

Wie kann CSS in HTML eingebunden werden?

1. Direkt im HTML-Dokument

Direkt style="CSS-Deklarationen" in ein HTML-Tag hineinschreiben.

Z.B. bei einer Überschrift:
<h2 style="color: red; background-color: black">Überschrift<h2>

2. Im <head> des Dokuments

Zwischen <head> und </head> z.B. folgenden Text schreiben:

<style type="text/css">
h3 { color: green; background-color: grey; }
</style>

3. In einer separaten CSS-Datei

Diese kann z.B. design.css heißen. Im Head-Bereich der HTML-Datei muss dann <link href="design.css" type="text/css" rel="stylesheet"> stehen.

Mehrere Sprachen in einer Datei

Bei den ersten beiden Varianten, die CSS-Befehle einzubinden, haben wir zwei Sprachen in einer Datei. Deshalb ist es sicher für den Anfang ratsam, die dritte Variante mit einer separaten Datei zu wählen.
So wird auch die Trennung zwischen Inhalt der Seite und Design der Seite deutlicher.

Die dritte Version hat einen weiteren Vorteil. Ich kann ein und dieselbe CSS-Datei in mehrere HTML-Datein einbinden und kann so einer Webpräsenz mit mehreren Seiten ein einheitliches Design geben und wenn ich später Änderungen vornehme, muss ich dies nur in einer einzigen Datei ändern.

Übung 1

Erstelle im gleichen Verzeichnis, in dem deine HTML-Dateien liegen, eine Datei design.css und schreibe in deine HTML-Dateien nach <head> die Zeile:

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

Schreibe in die Datei design.css verschiedene Deklarationen wie du sie hier gelernt hast, z.B.
body {background-color: silver;} oder
bh1 {color: red;}
und beobachte die Auswirkungen, wenn du die Datei im Browser anschaust. Speichern nicht vergessen und immer F5 für Neu laden drücken. Erst dann werden deine Änderungen wirksam. Experimentiere mit Hintergrundfarben, Schriftfarben usw.

Mehr CSS