Informatik · Klasse 7 · Webdesign: Meine erste Webseite · 2. Halbjahr

CSS: Das Styling des Webs

Einführung in Cascading Style Sheets (CSS) zur Gestaltung von Webseiten (Farben, Schriftarten, Layout).

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Modellieren und Implementieren
• KMK: Sekundarstufe I - Produzieren und Präsentieren

Über dieses Thema

Cascading Style Sheets (CSS) dienen der Gestaltung von Webseiten, indem sie Farben, Schriftarten und Layouts steuern. Schüler der Klasse 7 lernen in diesem Thema, wie CSS-Regeln das Aussehen einer HTML-Seite verändern, ohne den Inhalt zu beeinflussen. Sie experimentieren mit Eigenschaften wie 'color', 'font-family' und 'margin', um Überschriften zu formatieren oder Elemente zentriert auszurichten. Dies schafft ein klares Verständnis für die Trennung von Struktur (HTML) und Präsentation (CSS).

Im KMK-Lehrplan für Digitale Welten verbindet das Thema die Kompetenzen 'Modellieren und Implementieren' mit 'Produzieren und Präsentieren'. Schüler entwerfen Regelsets, vergleichen inline- mit externen Stylesheets und diskutieren Vorteile wie Wartbarkeit und Konsistenz. Solche Aufgaben fördern systematisches Denken und kreative Problemlösung, die für Webdesign essenziell sind.

Aktives Lernen eignet sich hervorragend für CSS, da Schüler Änderungen sofort im Browser sehen und iterativ verbessern können. Praktische Übungen mit Code-Editoren und Live-Vorschauen machen abstrakte Regeln greifbar, steigern Motivation und festigen das Verständnis durch Trial-and-Error.

Leitfragen

1. Erkläre, wie CSS verwendet wird, um das Aussehen einer HTML-Seite zu steuern.
2. Entwerfe ein CSS-Regelset, um die Schriftart und Farbe einer Webseite zu ändern.
3. Vergleiche die Vorteile der Trennung von Inhalt (HTML) und Design (CSS).

Lernziele

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

Bevor es losgeht

Grundlagen von HTML: Struktur von Webseiten

Warum: Schüler müssen die grundlegende Struktur von HTML-Dokumenten und die Bedeutung von Elementen wie Überschriften, Absätzen und Listen verstehen, um sie mit CSS gestalten zu können.

Einführung in das Internet und Webseiten

Warum: Ein grundlegendes Verständnis davon, wie Webseiten im Internet funktionieren und wie sie aufgebaut sind, ist notwendig, um die Rolle von CSS als Gestaltungswerkzeug zu begreifen.

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.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

CSS verändert den Inhalt der HTML-Seite.

Was Sie stattdessen lehren sollten

CSS beeinflusst nur das Aussehen, nicht den HTML-Code. Aktive Experimente, bei denen Schüler CSS entfernen und die Seite neu laden, zeigen dies klar. Peer-Diskussionen helfen, mentale Modelle zu korrigieren.

Häufige Fehlvorstellung

Inline-Styles sind immer besser als externe CSS-Dateien.

Was Sie stattdessen lehren sollten

Externe Stylesheets sind wartbarer und skalierbar. Gruppenvergleiche von vor/nach-Umsetzungen verdeutlichen Vorteile. Hands-on-Übungen mit großen Seiten fördern dieses Verständnis.

Häufige Fehlvorstellung

CSS-Regeln wirken immer sofort und überschreiben sich nie.

Was Sie stattdessen lehren sollten

Die Kaskade bestimmt die Reihenfolge. Live-Tests mit Konflikten und !important zeigen Prioritäten. Iterative Paarbeit klärt Regeln durch Beobachtung.

Ideen für aktives Lernen

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.

30 Min.·Partnerarbeit

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.

45 Min.·Kleingruppen

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.

40 Min.·Ganze Klasse

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.

25 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• Webdesigner bei Agenturen wie 'Pixel & Code' nutzen CSS täglich, um die visuelle Identität von Kundenwebseiten zu gestalten, von kleinen lokalen Geschäften bis hin zu großen Online-Shops.
• Entwicklerteams bei Unternehmen wie Zalando oder Otto verwenden CSS, um konsistente und ansprechende Benutzeroberflächen für ihre E-Commerce-Plattformen zu schaffen, die auf Millionen von Geräten angezeigt werden.
• Journalisten und Redakteure bei Online-Nachrichtenportalen wie Spiegel Online oder Zeit Online verlassen sich auf gut strukturiertes CSS, um Artikel übersichtlich und leserfreundlich zu präsentieren.

Ideen zur Lernstandserhebung

Lernstandskontrolle

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

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

Stelle die Frage: 'Warum ist es sinnvoll, den Inhalt (HTML) vom Aussehen (CSS) zu trennen?' Lass die Schüler in Kleingruppen diskutieren und anschließend die wichtigsten Argumente (z.B. Wartbarkeit, Wiederverwendbarkeit, Zugänglichkeit) im Plenum sammeln.

Häufig gestellte Fragen

Was ist CSS und wie wird es verwendet?

CSS steht für Cascading Style Sheets und steuert das visuelle Design von Webseiten. Es trennt Inhalt (HTML) von Stil, z.B. durch Regeln wie p { color: blue; }. Schüler lernen, externe Dateien zu verknüpfen und Eigenschaften wie font-size anzupassen. Dies ermöglicht konsistente Designs und erleichtert Änderungen. Im Unterricht testen sie Regeln live im Browser.

Welche Vorteile hat die Trennung von HTML und CSS?

Die Trennung macht Webseiten wartbarer: Änderungen am Design wirken site-weit, ohne HTML zu berühren. Sie fördert Teamarbeit, da Entwickler und Designer unabhängig arbeiten. Schüler vergleichen inline- vs. external-Styles und sehen, wie CSS Konsistenz schafft. Praktische Übungen verdeutlichen Effizienz für größere Projekte.

Wie kann aktives Lernen beim CSS-Unterricht helfen?

Aktives Lernen macht CSS greifbar, indem Schüler Code schreiben, live testen und iterieren. Methoden wie Pair-Programming oder Stationenrotationen lassen sie Erfolge sofort sehen, was Motivation steigert. Kollaborative Herausforderungen fördern Diskussionen über Kaskadierung und Fehlerquellen. So entsteht tiefes Verständnis statt passivem Auswendiglernen, passend zu KMK-Kompetenzen.

Wie entwerfe ich ein einfaches CSS-Regelset für eine Webseite?

Verbinden Sie CSS mit <link rel='stylesheet' href='style.css'>. Schreiben Sie Selektoren wie body { background-color: #f0f0f0; } oder h1 { font-family: Arial; color: navy; }. Testen Sie im Browser und passen Sie an. Schüler üben mit Vorlagen, um Schrift, Farben und Layout zu ändern. Fokussieren Sie auf Basics wie margin und padding für schnelle Erfolge.