Informatik · Klasse 8

Ideen für aktives Lernen

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.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Implementieren
• KMK: Sekundarstufe I - Darstellen und Interpretieren

• 20–45 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• 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.

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.

Worauf zu achten ist

Geben Sie den Schülerinnen und Schülern ein kleines HTML-Snippet mit verschiedenen Elementen (z. B. Überschriften, Absätze, Listen) und einer CSS-Regel. Bitten Sie sie, zu erklären, welche Elemente von der Regel betroffen sind und warum. Fragen Sie zusätzlich: 'Wie würden Sie nur die zweite Überschrift anders formatieren?'

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

Aktivität 02

• 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.

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.

Worauf zu achten ist

Zeigen Sie eine Webseite mit verschiedenen Designelementen. Stellen Sie gezielte Fragen wie: 'Welcher Selektor wurde wahrscheinlich verwendet, um alle Links blau zu färben?' oder 'Wie könnte man nur den Text in diesem spezifischen Button ändern, ohne andere Buttons zu beeinflussen?'

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

Aktivität 03

• 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.

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.

Worauf zu achten ist

Teilen Sie die Klasse in Paare auf. Jedes Paar erhält eine einfache HTML-Datei und eine Liste von Designanforderungen (z. B. 'Ändere die Hintergrundfarbe des Headers', 'Mache alle Absätze mit der Klasse 'wichtig' fett'). Die Paare implementieren die CSS-Regeln und bewerten anschließend die Arbeit des anderen Paares anhand der Liste.

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

Aktivität 04

• 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.

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

Worauf zu achten ist

Geben Sie den Schülerinnen und Schülern ein kleines HTML-Snippet mit verschiedenen Elementen (z. B. Überschriften, Absätze, Listen) und einer CSS-Regel. Bitten Sie sie, zu erklären, welche Elemente von der Regel betroffen sind und warum. Fragen Sie zusätzlich: 'Wie würden Sie nur die zweite Überschrift anders formatieren?'

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

Einige Hinweise zum Unterrichten dieser Einheit

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.

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

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

  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.

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

  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.

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

  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.

---

In dieser Übersicht verwendete Methoden

• Lernen durch Lehren
• Lernen an Stationen