CSS-Selektoren und Eigenschaften

Aktives Ausprobieren und praktische Fehleranalyse sind besonders wirksam bei CSS-Selektoren und Eigenschaften, weil die Auswirkungen direkt im Browser sichtbar werden. Schülerinnen und Schüler erkennen sofort, wie ihre Entscheidungen das Layout verändern, was das Verständnis für Kaskaden und Spezifität vertieft.

• Klasse 8
• Digitale Welten Gestalten: Informatik
• 4 Aktivitäten
• 20 Min.–45 Min.

Lernziele

1. Klassifizieren Sie HTML-Elemente basierend auf ihrer Struktur und ihrem Zweck, um die Auswahl geeigneter CSS-Selektoren zu bestimmen.
2. Implementieren Sie CSS-Regeln mit Element-, Klassen- und ID-Selektoren, um das visuelle Erscheinungsbild spezifischer HTML-Elemente zu verändern.
3. Analysieren Sie die Auswirkungen von CSS-Eigenschaften wie `color`, `font-size`, `background-color`, `margin` und `padding` auf das Layout und die Lesbarkeit einer Webseite.
4. Erstellen Sie eine einfache HTML-Seite und gestalten Sie diese mithilfe von CSS-Selektoren und -Eigenschaften, um ein vorgegebenes Designziel zu erreichen.

Lernen durch Lehren

⏱ 30 Min.·Partnerarbeit

Paarprogrammierung: Selektoren-Challenge

Teilen Sie Schüler in Paare auf. Geben Sie HTML-Code mit verschiedenen Elementen vor. Paare wenden nacheinander Element-, Klassen- und ID-Selektoren an, um Farben und Abstände zu ändern. Nach 10 Minuten präsentieren sie ihre Lösung der Klasse.

Vorbereitung & Details

Differentiieren Sie zwischen Element-, Klassen- und ID-Selektoren in CSS.

Moderationstipp: Fordern Sie die Paare in der Paarprogrammierung auf, ihre Lösungen gegenseitig zu erklären, bevor sie den Code ausführen – so festigen sich die Konzepte durch Sprache.

Setup: Präsentationsbereich im vorderen Teil des Raumes oder mehrere Lernstationen

Materials: Themen-Zuweisungskarten, Vorlage zur Unterrichtsplanung, Feedbackbogen für Mitschüler, Materialien für visuelle Hilfsmittel

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit

Lernen an Stationen

⏱ 45 Min.·Kleingruppen

Lernen an Stationen: Eigenschaften testen

Richten Sie vier Stationen ein: Farben und Schriften, Abstände mit margin/padding, Hintergründe, Spezifität vergleichen. Gruppen rotieren alle 8 Minuten, notieren Beobachtungen und passen CSS an. Abschließende Plenum-Diskussion.

Vorbereitung & Details

Implementieren Sie CSS-Regeln, um spezifische HTML-Elemente zu gestalten.

Moderationstipp: Stellen Sie bei den Stationen sicher, dass jeder Schüler mindestens einmal die DevTools nutzt, um die Auswirkungen von margin und padding live zu beobachten.

Setup: Im Raum verteilte Tische/Stationen

Materials: Stationskarten mit Arbeitsanweisungen, Unterschiedliche Materialien je Station, Timer für die Rotation

• Erinnern
• Verstehen
• Anwenden
• Analysieren
• Selbststeuerung
• Beziehungsfähigkeit

Lernen durch Lehren

⏱ 20 Min.·Ganze Klasse

Whole Class: Layout-Debugging

Projektieren Sie eine fehlerhafte Webseite. Die Klasse identifiziert Probleme gemeinsam, schlägt CSS-Fixes vor und testet live im Browser. Jeder Schüler notiert eine eigene Regel.

Vorbereitung & Details

Analysieren Sie die Auswirkungen verschiedener CSS-Eigenschaften auf das Layout einer Webseite.

Moderationstipp: Lassen Sie beim Layout-Debugging gezielt Fehler einbauen, damit die Klasse lernt, systematisch nach falschen Selektoren oder Überschreibungen zu suchen.

Setup: Präsentationsbereich im vorderen Teil des Raumes oder mehrere Lernstationen

Materials: Themen-Zuweisungskarten, Vorlage zur Unterrichtsplanung, Feedbackbogen für Mitschüler, Materialien für visuelle Hilfsmittel

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit

Lernen durch Lehren

⏱ 25 Min.·Einzelarbeit

Individual: Persönliche Webseite

Jeder Schüler erstellt eine einfache HTML-Seite und gestaltet sie mit mindestens drei Selektoren und fünf Eigenschaften. Speichern und peer-reviewen.

Vorbereitung & Details

Differentiieren Sie zwischen Element-, Klassen- und ID-Selektoren in CSS.

Setup: Präsentationsbereich im vorderen Teil des Raumes oder mehrere Lernstationen

Materials: Themen-Zuweisungskarten, Vorlage zur Unterrichtsplanung, Feedbackbogen für Mitschüler, Materialien für visuelle Hilfsmittel

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit

Dieses Thema unterrichten

Erfahrene Lehrkräfte beginnen mit konkreten Beispielen und lassen Schüler zunächst einfache Regeln anwenden, bevor sie die theoretischen Konzepte wie Spezifität einführen. Wichtig ist, dass Fehler nicht als Hindernis, sondern als Lernchance gesehen werden. Peer-Feedback und gemeinsames Debugging stärken das Verständnis nachhaltiger als Frontalunterricht.

Was Sie erwartet

Erfolgreiches Lernen zeigt sich darin, dass Schülerinnen und Schüler Selektoren gezielt einsetzen, um Layouts zu gestalten und Probleme systematisch zu lösen. Sie können erklären, warum bestimmte Regeln wirken oder nicht und wie Prioritäten in der Kaskade funktionieren.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während der Stationenarbeit zu Eigenschaften beobachten Sie, dass einige Schüler margin und padding als austauschbar behandeln.

Was Sie stattdessen lehren sollten

Nutzen Sie die Stationenmaterialien mit Maßänderungen und bitten Sie die Schüler, vor und nach jeder Änderung Skizzen der Box-Modelle anzufertigen. Diskutieren Sie im Anschluss gemeinsam, warum margin den äußeren Abstand und padding den inneren Abstand beeinflusst.

Häufige Fehlvorstellung

Während der Paarprogrammierung Selektoren-Challenge sehen Sie, dass Schüler annehmen, ID-Selektoren hätten keine höhere Priorität.

Was Sie stattdessen lehren sollten

Fordern Sie die Paare auf, kollidierende Regeln mit ID- und Klassen-Selektoren zu erstellen und die Ergebnisse im Browser zu vergleichen. Lassen Sie sie in einer Tabelle dokumentieren, welche Selektoren welche Elemente formatieren.

Häufige Fehlvorstellung

Während des Layout-Debuggings ignorieren Schüler die DevTools, um zu prüfen, ob ihre Selektoren überhaupt auf Elemente passen.

Was Sie stattdessen lehren sollten

Machen Sie das Prüfen der Selektor-Matches in den DevTools zur Pflichtaufgabe. Lassen Sie die Schüler Screenshots von positiven und negativen Matches erstellen und in einer gemeinsamen Präsentation erklären, warum bestimmte Regeln nicht wirken.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Nach der Paarprogrammierung Selektoren-Challenge geben Sie den Schülerinnen und Schülern ein HTML-Snippet mit verschiedenen Elementen und einer CSS-Regel vor. Sie sollen erklären, welche Elemente formatiert werden und wie sie nur die zweite Überschrift gezielt ansprechen würden.

Kurze Überprüfung

Nach den Stationen Eigenschaften testen zeigen Sie eine Webseite mit verschiedenen Designelementen. Stellen Sie gezielte Fragen wie: 'Welcher Selektor wurde für die blauen Links verwendet?' oder 'Wie würde man den Text dieses spezifischen Buttons ändern, ohne andere Buttons zu beeinflussen?'

Gegenseitige Bewertung

Während der Individualarbeit Persönliche Webseite teilen Sie die Klasse in Paare auf. Jedes Paar bewertet die Arbeit des anderen anhand einer Liste von Designanforderungen und gibt konstruktives Feedback zu Selektoren und Eigenschaften.

Erweiterungen & Unterstützung

• Challenge: Fordern Sie schnelle Schüler auf, eine komplexere Regel mit verschachtelten Selektoren (z. B. 'div.container p.highlight') zu erstellen und die Wirkung zu erklären.
• Scaffolding: Geben Sie Schülern, die kämpfen, vorbereitete Code-Snippets mit Lücken, die sie mit den richtigen Selektoren und Eigenschaften füllen müssen.
• Deeper exploration: Lassen Sie Schüler die CSS-Spezifitäts-Hierarchie in einem selbst erstellten Schaubild visualisieren und mit Beispielen aus ihrem eigenen Code vergleichen.

Schlüsselvokabular

Element-Selektor	Ein CSS-Selektor, der alle HTML-Elemente eines bestimmten Typs anspricht, z. B. `p` für alle Absätze.
Klassen-Selektor	Ein CSS-Selektor, der mit einem Punkt (`.`) beginnt und auf alle HTML-Elemente angewendet wird, die dieses spezifische Klassenattribut besitzen.
ID-Selektor	Ein CSS-Selektor, der mit einem Rautezeichen (`#`) beginnt und auf genau ein HTML-Element mit dieser eindeutigen ID abzielt.
CSS-Eigenschaft	Ein Stilmerkmal, das auf ein ausgewähltes HTML-Element angewendet wird, wie z. B. `color` für die Textfarbe oder `font-size` für die Schriftgröße.
Deklaration	Ein Paar aus Eigenschaft und Wert innerhalb einer CSS-Regel, z. B. `color: blue;`.