Einführung in CSS: Styling für das Web

Aktive Lernformate passen hier, weil Schülerinnen und Schüler die Trennung von Inhalt und Darstellung erst dann wirklich verstehen, wenn sie selbst die Wirkung von CSS-Regeln im Browser erleben. Durch praktisches Ausprobieren und sofortiges Feedback wird abstrakte Theorie zu greifbarem Wissen, das bleibt.

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

Lernziele

1. Erklären Sie die Funktion von CSS zur Trennung von Inhalt (HTML) und Präsentation (CSS) in Webseiten.
2. Implementieren Sie einfache CSS-Regeln zur Änderung von Schriftart, Farbe und Hintergrund von HTML-Elementen.
3. Vergleichen Sie die Auswirkungen von Inline-, internen und externen Stylesheets auf die Organisation und Wartbarkeit von Webcode.
4. Analysieren Sie die Vorteile der Verwendung externer Stylesheets für die Konsistenz und Effizienz bei der Webseitengestaltung.
5. Erstellen Sie eine einfache HTML-Seite und gestalten Sie diese mit einem externen CSS-Stylesheet.

Projektbasiertes Lernen

⏱ 25 Min.·Partnerarbeit

Paararbeit: CSS-Farben und Schriften

Paare erhalten ein einfaches HTML-Beispiel. Sie fügen CSS-Regeln für Hintergrundfarben, Textfarben und Schriftarten hinzu, speichern und laden im Browser. Gemeinsam variieren sie Werte und notieren Beobachtungen.

Vorbereitung & Details

Erklären Sie die Trennung von Inhalt (HTML) und Gestaltung (CSS).

Moderationstipp: Lassen Sie die Paare während der Paararbeit die Farbnamen und Schriftarten direkt auf einer vorbereiteten HTML-Seite ausprobieren und ihre Ergebnisse im Browser vergleichen.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 35 Min.·Kleingruppen

Kleingruppen: Externes Stylesheet bauen

Gruppen erstellen eine separate CSS-Datei und verknüpfen sie mit HTML. Sie stylen Überschriften, Absätze und Listen. Jede Gruppe präsentiert eine Änderung und diskutiert Auswirkungen auf mehrere Seiten.

Vorbereitung & Details

Implementieren Sie einfache CSS-Regeln zur Änderung von Farben und Schriftarten.

Moderationstipp: Geben Sie den Kleingruppen klare Anweisungen zum Aufbau eines externen Stylesheets und einer zugehörigen HTML-Datei, damit die Struktur sofort sichtbar wird.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 45 Min.·Ganze Klasse

Ganzer Unterricht: Stil-Challenge

Klasse bekommt ein Standard-HTML. Jeder schlägt eine CSS-Regel vor, Klasse stimmt ab und implementiert. Browser-Vergleich vor/nach zeigt Effekte. Abschließende Runde zu Vorteilen.

Vorbereitung & Details

Analysieren Sie die Vorteile der Verwendung von externen Stylesheets.

Moderationstipp: Starten Sie die Stil-Challenge mit einer vorbereiteten, unattraktiven Seite, damit die Schülerinnen und Schüler die Verbesserung durch CSS direkt erleben können.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 20 Min.·Einzelarbeit

Individuell: Persönlicher Stil-Editor

Schüler kopieren ein HTML-Template und experimentieren allein mit CSS für Farben und Fonts. Sie speichern Versionen und wählen ihre Favoritin aus.

Vorbereitung & Details

Erklären Sie die Trennung von Inhalt (HTML) und Gestaltung (CSS).

Moderationstipp: Fordern Sie die Schülerinnen und Schüler auf, ihre persönlichen Stil-Editor-Seiten mit mindestens drei verschiedenen CSS-Regeln auszustatten und diese zu präsentieren.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Dieses Thema unterrichten

Erfahrene Lehrkräfte beginnen mit kleinen, sichtbaren Änderungen und steigern die Komplexität schrittweise. Sie vermeiden lange theoretische Erklärungen und setzen stattdessen auf sofortiges Ausprobieren. Wichtig ist, die Trennung von HTML und CSS durch konkrete Beispiele zu festigen und Missverständnisse wie die Wirkung von Inline-Styles durch Gegenbeispiele zu klären.

Was Sie erwartet

Erfolgreich lernen die Schülerinnen und Schüler, wenn sie CSS-Regeln gezielt anwenden, die Auswirkungen im Browser sehen und die Vorteile externer Stylesheets für Wartung und Konsistenz erkennen. Sie können erklären, warum CSS nur die Darstellung beeinflusst und wie Selektoren funktionieren.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während der Paararbeit zu CSS-Farben und Schriften beobachten Sie, dass einige Schülerinnen und Schüler denken, die Farbe ändere den eigentlichen Textinhalt.

Was Sie stattdessen lehren sollten

Nutzen Sie die aktive Browser-Ansicht: Die Schülerinnen und Schüler sehen, dass der HTML-Quellcode unverändert bleibt, nur die Darstellung im Browser sich ändert. Fordern Sie sie auf, den Quellcode zu überprüfen und zu vergleichen.

Häufige Fehlvorstellung

Während der Kleingruppenarbeit zum externen Stylesheet vermuten manche, Inline-Styles seien immer die bessere Wahl.

Was Sie stattdessen lehren sollten

Lassen Sie die Gruppen ihre externen Stylesheets mit Inline-Styles vergleichen: Ändern Sie gemeinsam eine Eigenschaft im externen Sheet und zeigen Sie, wie alle verlinkten Seiten sofort aktualisiert werden. Die Schülerinnen und Schüler erleben so die Wartungsvorteile.

Häufige Fehlvorstellung

Während der Stil-Challenge denken einige, CSS-Regeln wirken nur auf eine einzelne Seite.

Was Sie stattdessen lehren sollten

Führen Sie die Schülerinnen und Schüler dazu, ein externes Stylesheet für mehrere Seiten zu nutzen. Zeigen Sie, wie Änderungen im Sheet alle verlinkten Seiten betreffen, und lassen Sie sie dies in der Challenge praktisch anwenden.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Nach der Paararbeit zu CSS-Farben und Schriften geben Sie den Schülerinnen und Schülern ein HTML-Fragment und die Aufgabe: 'Schreiben Sie eine CSS-Regel, die die Textfarbe dieses Absatzes auf Grün ändert und die Schriftart auf 'Courier New' setzt. Nennen Sie den Selektor und die Deklarationen.'

Kurze Überprüfung

Während der Kleingruppenarbeit zum externen Stylesheet zeigen Sie eine einfache Webseite mit einem Tippfehler im CSS (z.B. 'font-size: 16pix;' statt 'px'). Fragen Sie: 'Was ist hier falsch? Wie würden Sie die Regel korrigieren, um die Schriftgröße auf 20 Pixel zu setzen?'

Diskussionsfrage

Nach der Stil-Challenge stellen Sie die Frage: 'Stellen Sie sich vor, Sie haben eine Webseite mit 50 Seiten. Warum ist es besser, ein externes Stylesheet zu verwenden, anstatt jede Seite einzeln mit Inline-Styles zu gestalten? Nennen Sie mindestens drei Gründe, die Sie in der Challenge erlebt haben.'

Erweiterungen & Unterstützung

• Fordern Sie schnelle Schülerinnen und Schüler auf, eine responsive Komponente einzubauen, z.B. unterschiedliche Schriftgrößen für Mobil- und Desktop-Ansicht.
• Unterstützen Sie Schülerinnen und Schüler mit Schwierigkeiten, indem Sie ihnen vorgefertigte CSS-Regeln zum Einfügen geben, die sie dann anpassen können.
• Vertiefen Sie die Thematik, indem die Schülerinnen und Schüler ein externes Stylesheet für mehrere HTML-Seiten erstellen und die Konsistenz überprüfen.

Schlüsselvokabular

Selektor	Ein Muster, das HTML-Elemente auswählt, auf die CSS-Regeln angewendet werden sollen.
Deklaration	Ein Paar aus Eigenschaft und Wert (z.B. 'color: blue;'), das festlegt, wie ein ausgewähltes Element gestylt wird.
Eigenschaft	Ein Stilmerkmal eines HTML-Elements, das mit CSS geändert werden kann, wie z.B. 'font-family' oder 'color'.
Wert	Die spezifische Einstellung für eine CSS-Eigenschaft, z.B. 'Arial' für 'font-family' oder '#0000FF' für 'color'.
Externes Stylesheet	Eine separate .css-Datei, die über einen Link im HTML-Dokument eingebunden wird, um das Aussehen der gesamten Webseite zu definieren.