Aufgabe A08 – Erstes CSS: Farben & Schrift

Ab jetzt verlassen wir die „90er-Jahre-Optik"! Wir gestalten die Seiten mit CSS. Beginne mit feuer.html – die Farben Rot und Orange passen gut zum Thema.

Teil A – CSS im <head> einbinden

Öffne deine feuer.html. Füge im <head>-Bereich ein <style>-Element ein:

<head>
    <meta charset="UTF-8">
    <title>Feuer</title>
    <style>
        body {
            background-color: #1a0a00;
            color: #f5deb3;
            font-family: Arial, Helvetica, sans-serif;
        }

        h1 {
            color: #ff6600;
        }

        h2 {
            color: #ff9944;
        }
    </style>
</head>

Speichere und öffne die Seite im Browser. Wie sieht sie aus?

Teil B – Weitere CSS-Eigenschaften ausprobieren

Ergänze das <style>-Element schrittweise um folgende Eigenschaften. Speichere nach jedem Schritt und schau dir das Ergebnis an:

Eigenschaft	Beispielwert	Bedeutung
`font-size`	`18px` oder `1.1em`	Schriftgröße
`line-height`	`1.6`	Zeilenabstand (gut lesbar: 1.4–1.8)
`max-width`	`700px`	Maximale Breite des Elements
`margin`	`0 auto`	Automatisch zentrieren
`padding`	`1em 2em`	Innenabstand
`border-bottom`	`2px solid #ff6600`	Linie unter einem Element
`text-decoration`	`none`	Unterstreichung entfernen (z. B. bei Links)

Teil C – Jede Elementseite bekommt ihr Farbschema

Wende ein passendes Farbschema auf jede Seite an (CSS im <head>):

Seite	Farbidee
feuer.html	Schwarz/Dunkelbraun, Orange/Rot
erde.html	Beige/Dunkelbraun, Erdtöne
luft.html	Hellblau/Weiß, klare Töne
wasser.html	Dunkelblau/Teal, Wasserblau
index.html	Neutral, alle vier Farben als Akzente

💡 Farben in CSS:

Hexadezimal: #ff6600 (Rot, Grün, Blau je 0–ff)
RGB: rgb(255, 102, 0)
Farbname: coral, navy, darkgreen …

Hier findest du einen nützlichen Color Picker, mit dem du Farben in die unterschiedlichen Werte umwandeln kannst: https://htmlcolorcodes.com/color-picker/

Und für gradient Farbverläufe im Handumdrehen gibt es dieses Tool: https://cssgradient.io

Das macht einem das (CSS-)Leben vor allem anfangs etwas leichter ;-)

Zusatzaufgabe

Probiere den Webinspektor deines Browsers aus – wähle ein Element direkt aus und ändere z.B. dessen Farbe

Füge anschließend dem Element on-the-fly einige weitere CSS-Farb-Eigenschaften hinzu und beobachte direkt, wie es sich verändert.

So kannst du Ideen erst einmal ausprobieren, ohne jedesmal direkt deine Datei ändern und abspeichern zu müssen.

Browser	Mac	Windows
Firefox	Cmd + Alt + I	F12oderStrg + Shift + I
Safari	Cmd + Alt + I	–
Chrome	Cmd + Alt + I	F12oderStrg + Shift + I
Edge	Cmd + Alt + I	F12oderStrg + Shift + I
IE	–	F12