Lektion 2: CSS-Grundlagen und Kaskade: Syntax-Übung

Konzepterklärung

Diese Lektion ist eine praktische Übung, um grundlegende CSS-Regeln sauber und konsistent zu schreiben. Das Ziel ist noch nicht, eine vollständige Komponente zu erstellen, sondern sich mit der Struktur von Selektor, Eigenschaft und Wert vertraut zu machen. Sie werden üben, gezielte Änderungen vorzunehmen, das visuelle Ergebnis zu überprüfen und Ihre Regeln lesbar zu halten. Ein Anfänger, der kleine Regeln sicher schreiben kann, lernt in späteren Layout- und Responsive-Lektionen viel schneller.

Wo der Code hingehört

1. Beginnen Sie mit Variablen und Inputs. Platzieren Sie Stilregeln in wiederverwendbaren Klassenselektoren.
2. Fügen Sie Verarbeitungslogik im mittleren Abschnitt hinzu.
3. Beenden Sie mit Ausgabe und schneller Validierung.

Befehlsreferenz

• Üben Sie, jeweils eine Eigenschaft zu ändern, damit die Auswirkung jeder Bearbeitung offensichtlich ist.
• Benennen oder gruppieren Sie Regeln erst um, nachdem die aktuelle Version wie erwartet funktioniert.
• Überprüfen Sie Abstände, Rahmen und Textstile separat, anstatt alles auf einmal zu ändern.
• Notieren Sie eine Stelle, an der ein klarerer Selektorname die Lesbarkeit sofort verbessert.

Schritt-für-Schritt-Anleitung

1. Erstellen Sie eine einfache Karte in HTML und verbinden Sie sie mit dem Starter-CSS.
2. Bearbeiten Sie zuerst das Padding und den Border, damit Sie die Box-Struktur klar erkennen können.
3. Passen Sie die Titel- und Textstile an, ohne die Selektornamen zu ändern.
4. Machen Sie einen absichtlichen Fehler in einer Eigenschaft oder einem Wert und beheben Sie ihn, nachdem Sie das Problem erkannt haben.
5. Überprüfen Sie das finale CSS und entfernen Sie alles, was nicht zur Karte beiträgt.

Übungsaufgaben

• Erstellen Sie eine Benachrichtigungsbox mit Titel und Nachricht nach dem gleichen Muster der Regelschreibung.
• Erstellen Sie eine zweite Kartenvariante, indem Sie nur wenige Werte ändern, nicht die gesamte Struktur.
• Fügen Sie einen Hover-Zustand oder einen Hervorhebungsstil hinzu, ohne das Stylesheet schwerer lesbar zu machen.

Coding-Challenges

• Schreiben Sie zwei visuell unterschiedliche Karten und halten Sie dabei die gemeinsamen Regeln leicht erkennbar.
• Verbessern Sie das Starter-CSS, damit ein anderer Anfänger es schnell überfliegen und verstehen kann.

Kleine Übungsaufgaben

• Ändern Sie einen Selektornamen in etwas Klareres.
• Testen Sie eine Abstandsänderung und notieren Sie den visuellen Unterschied.
• Schreiben Sie einen Satz, der beschreibt, was das Starter-CSS stilisiert.