Lektion 1: CSS-Grundlagen und Kaskade: Konzept-Durchgang

Konzepterklärung

Diese Lektion stellt die zwei grundlegenden Konzepte vor, auf denen jede CSS-Datei basiert: Selektoren und die Kaskade. Sie werden sehen, wie eine Regel ein Element erreicht, warum eine Deklaration über einer anderen gewinnt und wie kleine Stiländerungen eine ganze Seite beeinflussen können. Anstatt Theorie isoliert auswendig zu lernen, gestalten Sie eine kleine Seite und beobachten das Ergebnis nach jeder Bearbeitung. Am Ende sollten Sie in der Lage sein, einen einfachen Regelsatz zu lesen, vorherzusagen, welche Stile angewendet werden, und kleine Änderungen vorzunehmen, ohne raten zu müssen.

Wo der Code hingehört

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

Befehlsreferenz

• Ändern Sie eine Eigenschaft in der `body`-Regel und notieren Sie, welche Teile der Seite sich automatisch aktualisieren.
• Fügen Sie eine Regel für `h1` oder `p` hinzu und vergleichen Sie diese dann mit den geerbten Stilen von `body`.
• Erstellen Sie eine zweite Regel, die dasselbe Element anspricht, und beobachten Sie, welche Deklaration gewinnt.
• Notieren Sie ein Beispiel dafür, wann gemeinsame Basisstile eine Seite einfacher wartbar machen.

Schritt-für-Schritt-Anleitung

1. Beginnen Sie mit einer Seite, die eine Überschrift und einen Absatz enthält, und wenden Sie dann das Starter-CSS genau wie geschrieben an.
2. Beachten Sie, welche Eigenschaften von `body` geerbt werden und welche direkt für jedes Element deklariert werden müssen.
3. Fügen Sie eine neue Regel für die Überschrift hinzu und sagen Sie das Ergebnis voraus, bevor Sie die Seite aktualisieren.
4. Erstellen Sie absichtlich eine widersprüchliche Deklaration, um zu sehen, wie die Kaskade den endgültigen Stil bestimmt.
5. Fassen Sie abschließend zusammen, welche Regel global war, welche Regel spezifisch war und warum diese Unterscheidung wichtig ist.

Übungsaufgaben

• Gestalten Sie einen kurzen Artikel mit einer Überschrift, einem Absatz und einem Link, indem Sie nur Elementselektoren verwenden.
• Erstellen Sie eine zweite Version, in der der `body` die Basistypografie festlegt und individuelle Regeln die Betonung übernehmen.
• Erstellen Sie ein kleines Beispiel, das die Vererbung beweist, indem Sie die Textfarbe an einer Stelle ändern.

Coding-Challenges

• Schreiben Sie zwei konkurrierende Regeln für dasselbe Element und erklären Sie, warum das Endergebnis korrekt ist.
• Refaktorieren Sie ein unübersichtliches Starter-Stylesheet in klarere Basisstile plus einige gezielte Überschreibungen.

Kleine Übungsaufgaben

• Fügen Sie eine Regel hinzu, die den Abstand ändert, nicht die Farbe.
• Schreiben Sie eine einzeilige Notiz, die erklärt, was die Kaskade bewirkt.
• Testen Sie eine kleine Anpassung und bestätigen Sie, welche Elemente sich geändert haben.