Informatik · Klasse 8 · Web-Technologien: Eigene Inhalte gestalten · 2. Halbjahr

CSS-Selektoren und Eigenschaften

Die Schülerinnen und Schüler wenden verschiedene CSS-Selektoren an und gestalten Elemente mit grundlegenden Eigenschaften.

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

Über dieses Thema

CSS-Selektoren und Eigenschaften bilden die Grundlage für das Gestalten von Webseiten. Schülerinnen und Schüler lernen, Element-Selektoren wie p oder div anzuwenden, um alle passenden Elemente zu formatieren. Klassen-Selektoren mit dem Punkt (z. B. .highlight {}) erlauben die Wiederholung von Stilen bei mehreren Elementen, während ID-Selektoren mit dem Hashtag (#header {}) einzigartige Elemente präzise ansprechen. Grundlegende Eigenschaften wie color, font-size, background-color, margin und padding verändern Farben, Schriften und Abstände.

Im Rahmen der Einheit 'Web-Technologien: Eigene Inhalte gestalten' differenzieren Schüler die Selektoren, implementieren CSS-Regeln in HTML-Dateien und analysieren deren Auswirkungen auf das Layout. Dies entspricht den KMK-Standards für Implementieren und Darstellen in der Sekundarstufe I. Durch das Ändern von Werten sehen sie unmittelbar, wie Spezifität und Kaskade funktionieren, was systematisches Denken in der Informatik fördert.

Aktives Lernen eignet sich hervorragend für dieses Thema, weil Schüler in Echtzeit-Editoren experimentieren, Fehler korrigieren und Erfolge visuell erleben. Kollaboratives Paarprogrammieren oder Gruppen-Challenges machen abstrakte Regeln greifbar und steigern die Motivation nachhaltig.

Leitfragen

1. Differentiieren Sie zwischen Element-, Klassen- und ID-Selektoren in CSS.
2. Implementieren Sie CSS-Regeln, um spezifische HTML-Elemente zu gestalten.
3. Analysieren Sie die Auswirkungen verschiedener CSS-Eigenschaften auf das Layout einer Webseite.

Lernziele

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

Bevor es losgeht

Grundlagen von HTML: Struktur und Elemente

Warum: Schüler müssen die grundlegende Struktur von HTML-Dokumenten und die Bedeutung verschiedener HTML-Tags verstehen, um sie mit CSS gezielt ansprechen zu können.

Einführung in das Internet und Webseiten

Warum: Ein grundlegendes Verständnis davon, wie Webseiten aufgebaut sind und wie sie im Browser dargestellt werden, ist notwendig, um die Rolle von CSS nachvollziehen zu können.

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;`.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Alle CSS-Selektoren haben die gleiche Priorität.

Was Sie stattdessen lehren sollten

ID-Selektoren überschreiben Klassen- und Element-Selektoren durch höhere Spezifität. Aktive Experimente in Editoren zeigen dies visuell, wenn Schüler kollidierende Regeln testen und die Kaskade beobachten. Peer-Diskussionen klären die Hierarchie nachhaltig.

Häufige Fehlvorstellung

Margin und padding sind austauschbar.

Was Sie stattdessen lehren sollten

Margin schafft Abstand zum umliegenden Element, padding innen. Hands-on-Stationen mit Maßänderungen machen den Unterschied spürbar. Schüler zeichnen Modelle und vergleichen Browser-Ergebnisse, um Layout-Effekte zu verinnerlichen.

Häufige Fehlvorstellung

CSS-Regeln wirken immer sofort auf alle Elemente.

Was Sie stattdessen lehren sollten

Selektoren müssen passen, sonst ignoriert der Browser sie. Live-Debugging-Aktivitäten helfen, da Schüler den DevTools nutzen, um Matches zu prüfen und Regeln iterativ anpassen.

Ideen für aktives Lernen

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.

30 Min.·Partnerarbeit

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.

45 Min.·Kleingruppen

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.

20 Min.·Ganze Klasse

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.

25 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• Webdesigner und Frontend-Entwickler bei Unternehmen wie Zalando oder Otto nutzen CSS-Selektoren und -Eigenschaften täglich, um die Benutzeroberflächen von Online-Shops zu gestalten und die Benutzererfahrung zu optimieren.
• Grafikdesigner, die sich auf digitale Medien spezialisieren, verwenden ihre Kenntnisse über visuelle Hierarchie und Layout, die durch CSS gesteuert werden, um ansprechende Webseiten für Agenturen oder Kundenprojekte zu erstellen.
• Spieleentwickler, die Benutzeroberflächen für PC- oder Konsolenspiele entwerfen, wenden ähnliche Prinzipien der Elementauswahl und Stilgestaltung an, um Menüs, HUDs und In-Game-Informationen klar und ästhetisch darzustellen.

Ideen zur Lernstandserhebung

Lernstandskontrolle

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?'

Kurze Überprüfung

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?'

Gegenseitige Bewertung

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.

Häufig gestellte Fragen

Wie unterscheide ich CSS-Element-, Klassen- und ID-Selektoren?

Element-Selektoren wie 'p {}' formatieren alle passenden Tags. Klassen '.menu {}' wenden sich auf beliebig viele Elemente mit class='menu' an. ID '#logo {}' ist für ein einziges Element mit id='logo' gedacht und hat höchste Spezifität. Testen Sie in einem Editor, um Prioritäten zu sehen.

Welche CSS-Eigenschaften eignen sich für Anfängerlayouts?

Beginnen Sie mit color und background-color für Farben, font-size und font-family für Texte, margin und padding für Abstände. Width und height steuern Größen. Kombinieren Sie sie schrittweise in Regeln, um responsive Designs zu üben. Browser-DevTools zeigen Live-Vorschauen.

Wie hilft aktives Lernen beim Verständnis von CSS-Selektoren?

Aktive Ansätze wie Paarprogrammierung oder Stationenrotation lassen Schüler direkt im Code experimentieren und Browser-Änderungen sehen. Das gibt schnelles Feedback, reduziert Frustration und fördert Trial-and-Error. Kollaborative Challenges bauen Selbstvertrauen auf, da Peers Lösungen teilen und diskutieren.

Warum wirkt meine CSS-Regel nicht auf dem HTML-Element?

Überprüfen Sie Selektor-Syntax, Spezifität und ob das Element existiert. Cachen Sie den Browser nicht, nutzen Sie DevTools (F12). Häufige Fehler: Fehlender Punkt bei Klassen oder Tippfehler in IDs. Iteratives Testen mit einfachen Regeln klärt Ursachen schnell.