CSS: Das Styling des Webs

Aktives Ausprobieren hilft Schülern, die Wirkung von CSS direkt zu erleben. In diesem Thema geht es darum, dass Schülerinnen und Schüler durch eigenes Experimentieren verstehen, wie CSS das Aussehen einer Webseite verändert, ohne den Inhalt zu beeinflussen. Das praktische Tun festigt das Konzept der Trennung von Struktur und Präsentation nachhaltig.

• Klasse 7
• Digitale Welten verstehen und gestalten
• 4 Aktivitäten
• 25 Min.–45 Min.

Lernziele

1. Erkläre die Funktion von CSS-Selektoren zur gezielten Anwendung von Stilregeln auf HTML-Elemente.
2. Entwerfe ein CSS-Regelset zur Anpassung von Schriftart, Schriftgröße und Textfarbe für verschiedene HTML-Elemente.
3. Vergleiche die Lesbarkeit und Wartbarkeit von Webseiten mit und ohne externe CSS-Dateien.
4. Analysiere den Aufbau eines einfachen CSS-Regelsets, bestehend aus Selektor, Eigenschaft und Wert.
5. Demonstriere die Anwendung von CSS zur Gestaltung eines einfachen Webseiten-Layouts mit Abständen und Ausrichtungen.

Projektbasiertes Lernen

⏱ 30 Min.·Partnerarbeit

Paarprogrammierung: CSS-Farben und Schriften

In Paaren bearbeiten Schüler eine vorgefertigte HTML-Datei. Sie schreiben CSS-Regeln für Farben und Schriftarten, laden die Seite neu und vergleichen Ergebnisse. Abschließend präsentieren sie ihre Designs.

Vorbereitung & Details

Erkläre, wie CSS verwendet wird, um das Aussehen einer HTML-Seite zu steuern.

Moderationstipp: Während der Paarprogrammierung mit CSS-Farben und Schriften solltest du sicherstellen, dass beide Partner abwechselnd tippen und die Ergebnisse gemeinsam besprechen.

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

Lernen an Stationen

⏱ 45 Min.·Kleingruppen

Lernen an Stationen: Layout-Experimente

Richten Sie drei Stationen ein: 1. Zentrierung mit margin, 2. Hintergründe mit background-color, 3. Abstände mit padding. Gruppen rotieren, notieren Code-Snippets und Beobachtungen.

Vorbereitung & Details

Entwerfe ein CSS-Regelset, um die Schriftart und Farbe einer Webseite zu ändern.

Moderationstipp: Bei den Stationen zu Layout-Experimenten ist es hilfreich, klare Zeitlimits pro Station zu setzen, damit alle Gruppen die Aufgaben schaffen.

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

Projektbasiertes Lernen

⏱ 40 Min.·Ganze Klasse

Whole-Class-Challenge: Persönliche Stilseite

Zeigen Sie eine Basis-HTML-Seite. Die Klasse entwirft gemeinsam ein CSS-Thema (z.B. 'Dunkelmodus'), wählt Eigenschaften ab und testet live. Diskutieren Sie Kaskadierung.

Vorbereitung & Details

Vergleiche die Vorteile der Trennung von Inhalt (HTML) und Design (CSS).

Moderationstipp: Gib bei der Whole-Class-Challenge klare Vorgaben für die persönliche Stilseite, damit alle Schülerinnen und Schüler vergleichbare Ergebnisse erzielen.

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

⏱ 25 Min.·Einzelarbeit

Individual: Stil-Überarbeitung

Jeder Schüler stylt eine eigene Mini-Webseite mit drei CSS-Regeln. Sie exportieren Screenshots vor/nach und reflektieren Vorteile der Trennung.

Vorbereitung & Details

Erkläre, wie CSS verwendet wird, um das Aussehen einer HTML-Seite zu steuern.

Moderationstipp: Führe bei der Stil-Überarbeitung Einzelgespräche, um individuelle Fragen zu klären und gezielt Feedback zu geben.

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

Erfahrungsgemäß lernen Schülerinnen und Schüler CSS am besten durch sofortiges Ausprobieren und iterative Anpassungen. Vermeide lange Erklärungen am Anfang, sondern lasse sie selbst entdecken, wie Eigenschaften wirken. Nutze konkrete Beispiele und vergleiche sie direkt mit dem HTML-Code, um die Trennung von Struktur und Präsentation zu verdeutlichen. Wiederholte Reflexion in Kleingruppen fördert das Verständnis und korrigiert Missverständnisse frühzeitig.

Was Sie erwartet

Erfolgreiches Lernen zeigt sich darin, dass Schülerinnen und Schüler CSS-Regeln bewusst anwenden, um Layouts zu gestalten und Formatierungen vorzunehmen. Sie können erklären, warum CSS nur das Aussehen beeinflusst und nicht den HTML-Code. Zudem erkennen sie die Vorteile externer Stylesheets gegenüber Inline-Styles.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während der Stationen Layout-Experimente beobachten die Schüler und du, wie CSS den Textinhalt verändert.

Was Sie stattdessen lehren sollten

Zeige den Schülern explizit, dass sie den HTML-Code nicht ändern sollen. Lass sie stattdessen CSS-Regeln entfernen und die Seite neu laden, um zu sehen, dass der Inhalt gleich bleibt.

Häufige Fehlvorstellung

Während der Whole-Class-Challenge persönliche Stilseite achten einige Schüler nur auf das Aussehen und nicht auf die Struktur.

Was Sie stattdessen lehren sollten

Fordere die Schüler auf, ihre HTML-Struktur schriftlich zu dokumentieren und mit der CSS-Gestaltung zu vergleichen, um die Trennung bewusst zu reflektieren.

Häufige Fehlvorstellung

Während der Paarprogrammierung CSS-Farben und Schriften glauben einige, dass Inline-Styles immer die bessere Wahl sind.

Was Sie stattdessen lehren sollten

Gib den Paaren zwei Versionen derselben Seite vor: eine mit Inline-Styles und eine mit externem CSS. Lasst sie die Wartbarkeit und Übersichtlichkeit vergleichen.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Nach der Paarprogrammierung CSS-Farben und Schriften gib den Schülern ein HTML-Snippet und ein einfaches CSS-Regelset. Frage: 'Welche Änderungen bewirkt dieses CSS-Regelset im HTML-Snippet?' und 'Nenne eine CSS-Eigenschaft, die du hinzufügen würdest, um den Text fett zu machen.'

Kurze Überprüfung

Während der Stationen Layout-Experimente zeige zwei Versionen einer Webseite: eine ohne CSS und eine mit einfachem CSS. Frage die Schüler: 'Was ist der Hauptunterschied zwischen diesen beiden Webseiten?' und 'Welche Vorteile siehst du in der zweiten Version?'

Diskussionsfrage

Nach der Whole-Class-Challenge persönliche Stilseite stelle die Frage: 'Warum ist es sinnvoll, den Inhalt (HTML) vom Aussehen (CSS) zu trennen?' Lass die Schüler in Kleingruppen diskutieren und sammle anschließend die wichtigsten Argumente im Plenum.

Erweiterungen & Unterstützung

• Fordere Schüler, die früh fertig sind, auf, eine zweite Stilseite mit mindestens drei verschiedenen Layouts zu erstellen.
• Biete Schülern, die unsicher sind, eine Schritt-für-Schritt-Anleitung mit vorgegebenen CSS-Eigenschaften an, die sie anwenden können.
• Ermutige interessierte Schüler, eine komplexere Stilseite mit Animationen oder responsiven Layouts zu gestalten, um ihr Wissen zu vertiefen.

Schlüsselvokabular

CSS-Selektor	Ein Muster, das angibt, auf welche HTML-Elemente eine CSS-Regel angewendet werden soll. Beispiele sind Elementnamen, Klassen oder IDs.
Deklaration	Ein Teil einer CSS-Regel, der aus einer Eigenschaft und ihrem Wert besteht. Sie legt fest, wie ein ausgewähltes Element gestaltet werden soll.
Eigenschaft	Ein Stilmerkmal eines HTML-Elements, das mit CSS geändert werden kann, wie z.B. 'color' (Farbe) oder 'font-family' (Schriftart).
Wert	Der spezifische Wert, der einer CSS-Eigenschaft zugewiesen wird, um ihr Aussehen zu definieren, z.B. 'blue' für die Farbe oder 'Arial' für die Schriftart.
Regelset	Eine Kombination aus einem oder mehreren Selektoren und einem oder mehreren Deklarationsblöcken, die zusammen definieren, wie Elemente gestylt werden.