Hintergrundfarbe

Zunächst verschönern wir die Seite mit einer Hintergrundfarbe. Die kann jeder nach eigenem Gusto wählen. Ich habe mich für einen hellgrauen Pastellton mit dem Hexacode #EBECE4 entschieden. Anregungen zur Farbwahl findet ihr unter Angabe der jeweiligen Hexadezimal-Farbcodes z.B. hier (Hinweis: Seite lädt unter Umständen etwas länger).

Unsere gewählte Hintergrundfarbe soll für den gesamten Body-Bereich gelten. Wir müssen also die Farbe dem "body" zuweisen. Hierzu rufen wir im CSS-Bereich den "body" auf, benennen die Eigenschaft (Stilangabe) - immer mit einem Doppelpunkt am Ende - und fügen die entsprechenden Werte ein. Die Eigenschaften mit Wertangaben schreiben wir immer in geschweifte Klammern.

Merke:
Alle Eigenschaften mit den dazugehörigen Wertangaben - sowohl im Head-Bereich oder später in einer ausgelagerten CSS-Datei - immer innerhalb geschweifter Klammern { } schreiben.

Daraus ergibt sich folgender neuer Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine erste CSS-Seite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type ="text/css">
body
{
background-color: #EBECE4;
}
</style>
</head>
<body>
Meine erste CSS Seite
</body>
</html>

Abspeichern, ansehen und schon kommt Farbe ins Spiel (auch wenn sie bei mir nur grau ist).

Man kann das Ganze auch in einer Reihe schreiben:

body {background-color: #EBECE4;}

Ich finde jedoch die erste Methode übersichtlicher. Vor allem ist besser zu erkennen, ob die geschweiften Klammern überhaupt vorhanden sind und wo sie geöffnet und geschlossen werden.

Wichtig:
Gewöhnt euch gleich an, nach jeder Angabe ein Semikolon zu setzen. Das ist wichtig um eine Trennung der jeweiligen Angaben und damit eine korrekte Browseranzeige zu gewährleisten.

Wir lernen Wissenswertes über Schriften und Überschriften kennen.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: