Hintergrundfarbe

Jedes Element hat einen Hintergrund. Standardmäßig ist er transparent, wir sehen also hindurch auf das, was dahinter liegt: in unserem Fall die weiße Seite.

Die Eigenschaft background-color füllt den Hintergrund mit einer Farbe. Der Hintergrund bedeckt die ganze Fläche des Elements, nicht nur den Platz hinter den Buchstaben. Sieh dir die schwarze Fläche um die Hauptüberschrift an: Sie ist so breit wie die Seite, obwohl die Überschrift kurz ist.

Das Element body ist hier etwas Besonderes: Der Browser malt seinen Hintergrund über das ganze Fenster.

Wie du aus der Lektion über Selektoren weißt, wird background-color anders als color nicht vererbt. Es kann so aussehen: Gäben wir main einen Hintergrund, schienen die Absätze darin ihn auch zu haben. In Wirklichkeit behalten die Absätze ihren transparenten Hintergrund, und wir sehen den Hintergrund von main durch sie hindurch.

Denke bei der Wahl der Farben an den Kontrast: Text muss sich deutlich von seinem Hintergrund abheben. Dunkler Text auf hellem Hintergrund oder heller Text auf dunklem Hintergrund ist gut lesbar, grauer Text auf grauem Hintergrund nicht:

Schwarzer Text auf weißem Hintergrund ist gut lesbar.

Dunkelgrauer Text auf grauem Hintergrund ist schwer lesbar.