Eine der ersten Eigenschaften, die wir häufig bei der Gestaltung einer Website brauche, sind die Farben. Dafür stehen uns in CSS zwei Eigenschaften zur Verfügung: color für die Schriftfarbe und background-color für die Hintergrundfarbe. Damit wir sinnvoll mit diesen Eigenschaften arbei können, benötigen wir zunächst mal ein HTML-Dokument, das wir formatieren wollen. Kopiere dazu folgenden Quelltext in ein leeres Dokument im Texteditor und speichere die Datei unter einem beliebigen Dateinamen aber mit der Endung .html ab.

<!DOCTYPE html>
<html lang="de">
<head>
<title>Haustiere</title>
<meta charset="utf-8">
<link rel="stylesheet" href="meinstil.css">
</head>
<body>
<h1>Meine Lieblings-HausTiere</h1>
<p>
Hier schreibe ich erstmal allgemein etwas
über Tiere, bevor ich dann mit den folgenden
Abschnitten konkreter werde...
</p>
<h2>Amphibien</h2>
<p>
Das ist jetzt ein Unterabschnitt. Dabei bleibt
es aber nicht, denn wir führen für jedes Tier
einen Unterunterabschnitt ein:
</p>
<h3>Frosch</h3>
<p>
Nicht schön, aber quakt laut
und frisst Mücken...
</p>
<h3>Axolotl</h3>
<p>
Verblüffend! Die Regenerationsfähigkeit
des Axolotl...
</p>
<h2>Säugetiere</h2>
<p>
Jetzt befinden wir uns wieder auf Ebene 2
und behandeln eine andere Klasse von Tieren.
</p>
<h3>Nacktmull</h3>
<p>
Der kennt keinen Schmerz...
</p>
<p>
Was der Nacktmull am liebsten frisst, sind...
</p>
</body>
</html>

Nun erstellen wir die CSS-Datei meinstil.css mit folgendem Inhalt und speichern sie in demselben Ordner wie die HTML-Datei oben.

h1 {
	background-color: green;
}
h2 {
	color: blue;
}

Jetzt können wir direkt die HTML-Datei in einem Browser öffnen und uns das Ergebnis ansehen.

Aufgaben

  1. Füge in der obigen HTML-Datei id- und class-Attribute ein, um dann durch weitere Anweisungen in der CSS-Datei einzelne Elemente anders einzufärben (z.B. mit den Farben red, blue, white, black, orange, olive, lime).
  2. Ergänze die CSS-Datei nun so, dass sich Regeln mit verschiedenen Farbanweisungen teilweise auf die gleichen Elemente beziehen. Sieh dir das Ergebnis an und experimentiere mit der Wahl der Selektoren.
  3. Erstelle noch eine zweite CSS-Datei mit weiteren Anweisungen. Verlinke sie ebenfalls oben im HTML-Dokument und sieh dir das aktualisierte Ergebnis an.