Station 5: Farben verändern

Aufgabe:

1. Ändere die Hintergrundfarbe des Headers.

2. Passe die Textfarbe des Footers an.

3. Gestalte die .highlight Box auffällig.

4. Füge einen kurzen Satz in die Box ein.

Technische Umsetzung:

1. Hintergrundfarbe ändern (background-color)

Öffne die Datei style.css und suche den Selektor für den Header, z. B.:

#header {
  background-color: lightgray;
}

Ersetze den Farbwert:

#header {
  background-color: #6a0dad;
}

2. Textfarbe ändern (color)

Um die Schriftfarbe im Footer zu ändern:

#footer {
  color: white;
}

3. Hervorgehobene Box gestalten

Die Klasse .highlight kannst du z. B. so gestalten:

.highlight {
  background-color: #ff6666;
  color: #ffffff;
  padding: 15px;
}

Spiele hier etwas mit den Einstellungen und verändere einzelne Werte.

4. Farben ausprobieren

CSS kennt verschiedene Arten, Farben anzugeben:

background-color: red;
background-color: #ff0000;
background-color: rgb(255, 0, 0);

5. Änderungen überprüfen

• Speichere style.css

• Lade die HTML-Seite im Browser neu

• Wenn etwas nicht sichtbar ist: „Untersuchen“ verwenden