Aufgabe 04 - Steckbrief gestalten

Aufgabe 04 - Steckbrief gestalten

Worum geht es?

Sie gestalten Ihren Steckbrief aus Aufgabe 02 mit CSS, ohne den HTML-Inhalt zu verändern. So erleben Sie die Trennung von Struktur und Formatierung in der Praxis (siehe Kapitel CSS-Grundlagen).

In dieser Übung üben Sie:

• Einbinden: eine externe CSS-Datei verknüpfen.
• Selektieren: Element-, Klassen- und ID-Selektoren gezielt einsetzen.
• Gestalten: Box-Modell, Farben und Schriften anwenden.
• Untersuchen: Styles mit den DevTools prüfen und anpassen.

Benötigte Unterlagen

• Ihre Lösung von Aufgabe 02,
• VS Code, Browser mit DevTools.

Arbeitsaufträge

Teil A - CSS anbinden

1. Legen Sie style.css an und binden Sie die Datei im head ein.
2. Setzen Sie zum Test die Hintergrundfarbe des body. Arbeiten Sie erst weiter, wenn das sichtbar wirkt.

Teil B - Gestalten

1. Definieren Sie eine Schriftart und Grundfarben (Hintergrund, Text) für die ganze Seite.
2. Gestalten Sie die Überschriften (Farbe, Abstand, z. B. Unterstreichung per border-bottom).
3. Bauen Sie den Steckbrief-Kern als “Karte”: begrenzte Breite, zentriert, Innenabstand, Rahmen oder Schatten, abgerundete Ecken.
4. Verwenden Sie mindestens einen Klassen-Selektor und einen ID-Selektor mit nachvollziehbarem Zweck.
5. Das Bild darf nie breiter als die Karte sein (max-width).

Teil C - Box-Modell erforschen

1. Untersuchen Sie Ihre Karte im Elemente-Tab der DevTools und fertigen Sie eine kleine Skizze des Box-Modells (content, padding, border, margin) mit Ihren tatsächlichen Werten an.
2. Ändern Sie einen Wert live in den DevTools und übernehmen Sie ihn anschließend in style.css.

Abgabe

Geben Sie den Projektordner ab (index.html unverändert gegenüber Aufgabe 02 bis auf den link-Tag, dazu style.css und die Box-Modell-Skizze).