Websites mit CSS gestalten

HTML liefert die Struktur, CSS macht daraus eine Gestaltung. In diesem Modul verstehst du, wie der Browser entscheidet, welche Regel gilt, und wie du Abstände, Grössen und Typografie kontrollierst. Du baust Komponenten mit Flexbox und ganze Seitenraster mit CSS Grid, machst sie mit Media Queries und flexiblen Einheiten responsiv und legst Farben, Schriften und Abstände als Custom Properties an. Dabei achtest du auf Kontraste, Fokuszustände und gut lesbare Typografie.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Selektoren gezielt wählen und die Kaskade beherrschen

   Kompetenz A

   Du verstehst, warum eine Regel 'gewinnt': Herkunft, Spezifität und Reihenfolge. Du arbeitest vor allem mit Klassen, vermeidest IDs und !important zum Stylen und benennst Klassen nach einem klaren System wie BEM.

   Situation

   Im Theme einer Agentur-Website wird ein Button in der Sidebar blau statt orange, obwohl die Regel '.button { background: orange; }' existiert.

   Deine Aufgabe

   Finde mit den DevTools heraus, welche Regel gewinnt, und löse das Problem ohne !important.

   Gutes Ergebnis

   Die DevTools zeigen '#sidebar a { background: blue; }' mit höherer Spezifität (1,0,1 gegen 0,1,0). Lösung: ID-Selektor durch '.sidebar__link' ersetzen und den Button als '.button--primary' definieren.

   SpezifitätKaskadeVererbungKlassen vs. IDsBEM-Namenskonvention
2. 2

   Abstände, Grössen und Typografie mit Box Model und passenden Einheiten steuern

   Kompetenz B

   Du setzt box-sizing: border-box ein, kennst den Unterschied zwischen margin und padding und weisst, wann rem, em, %, vw oder px sinnvoll sind. Schriftgrössen und Zeilenlängen wählst du so, dass Texte gut lesbar bleiben.

   Situation

   Ein Blogbeitrag auf der Website eines Verlags läuft auf dem 27-Zoll-Monitor über die ganze Breite, jede Zeile hat über 150 Zeichen.

   Deine Aufgabe

   Mach den Artikeltext lesbar.

   Gutes Ergebnis

   Textspalte mit max-width: 65ch und margin-inline: auto, Grundschrift 1.125rem, line-height: 1.6. Die Zeilenlänge liegt jetzt bei etwa 65 Zeichen.

   box-sizingmargin / paddingrem / em / chline-heightZeilenlänge
3. 3

   Komponenten wie Navigation, Karten und Buttons mit Flexbox ausrichten

   Kompetenz C

   Du nutzt Flexbox für eindimensionale Anordnungen: Elemente in einer Reihe oder Spalte verteilen, vertikal zentrieren, umbrechen lassen. Abstände setzt du mit gap statt mit Margins an einzelnen Kindern.

   Situation

   Die Hauptnavigation eines Restaurants soll das Logo links und vier Links rechts zeigen, alles vertikal mittig.

   Deine Aufgabe

   Setze die Navigation mit Flexbox um.

   Gutes Ergebnis

   '.nav { display: flex; justify-content: space-between; align-items: center; }' und die Linkliste mit 'display: flex; gap: 1.5rem;'. Kein Float und keine festen Höhen mehr.

   display: flexjustify-contentalign-itemsflex-wrapgap
4. 4

   Seitenlayouts und Raster mit CSS Grid aufbauen

   Kompetenz D

   Für zweidimensionale Layouts nutzt du CSS Grid: Spalten und Zeilen definieren, Bereiche benennen und Karten automatisch auf die verfügbare Breite verteilen. So überträgst du das Gestaltungsraster aus dem Entwurf direkt in Code.

   Situation

   Eine Fotografin möchte ein Portfolio, in dem die Bildkarten auf jedem Bildschirm sauber ausgerichtet sind, ohne feste Breakpoints.

   Deine Aufgabe

   Baue die Galerie mit CSS Grid.

   Gutes Ergebnis

   'grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;'. Auf dem Handy eine Spalte, auf dem Tablet zwei, auf dem Desktop vier, ganz ohne Media Query.

   display: gridfr-Einheitgrid-template-areasrepeat / minmaxauto-fit
5. 5

   Layouts mit Media Queries und flexiblen Werten responsiv machen

   Kompetenz E

   Du entwickelst Mobile First, setzt Breakpoints dort, wo das Layout bricht, und nicht nach Gerätenamen. Mit clamp() lässt du Überschriften fliessend mitwachsen.

   Situation

   Die Startseite eines Eventlokals hat eine Headline in 72 px, die auf dem Handy dreizeilig umbricht und Wörter abschneidet.

   Deine Aufgabe

   Mach Headline und Hero-Bereich responsiv.

   Gutes Ergebnis

   'font-size: clamp(2rem, 6vw, 4.5rem);', Hero-Layout einspaltig, ab 'min-width: 48em' zweispaltig. Auf dem iPhone SE passt die Headline auf zwei Zeilen.

   Mobile Firstmin-width-Media-Queryclamp()vwBreakpoints nach Inhalt
6. 6

   Ein konsistentes Gestaltungssystem mit Custom Properties, Zuständen und guten Kontrasten umsetzen

   Kompetenz F

   Du legst Farben, Schriften und Abstände zentral als CSS-Variablen an, damit Änderungen an einer Stelle reichen. Interaktive Elemente haben sichtbare Hover- und Fokuszustände, und Textfarben erfüllen die WCAG-Kontrastwerte.

   Situation

   Eine Gemeinde ändert ihre Hausfarbe von #0072BB zu #005A94. Im CSS kommt der alte Wert 47-mal vor.

   Deine Aufgabe

   Bau das CSS so um, dass solche Änderungen künftig an einer Stelle passieren, und prüfe die Kontraste.

   Gutes Ergebnis

   ':root { --color-primary: #005A94; --space-m: 1.5rem; }' und überall 'var(--color-primary)'. Weisser Text auf der neuen Farbe hat rund 7,3:1 Kontrast. Links und Buttons erhalten ':focus-visible' mit 3 px Outline.

   Custom Properties:hover / :focus-visibleKontrastverhältnis (WCAG)transitionprefers-color-scheme

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Leonie ist im 1. Lehrjahr als Mediamatikerin in der Marketingabteilung der Wohnwerk Möbel AG in Wil SG, eines Möbelhauses mit 90 Mitarbeitenden. Eine Agentur hat in Figma eine Kampagnenseite für die Herbstkollektion entworfen, und das Marketing will sie selbst umsetzen. Leonie übernimmt das CSS, muss es aber in die bestehende Website mit einem über die Jahre gewachsenen Stylesheet einbauen.

1. Kapitel 1

   Warum ist der Button rot?

   Leonie bindet ihr eigenes Stylesheet ein, doch die Buttons bleiben hartnäckig rot statt terrakotta. In den DevTools sieht sie, dass ein alter Selektor mit einer ID ihre Klassenregel übertrumpft. Statt mit !important zu kontern, ersetzt sie die ID-Regel in Absprache mit dem Team durch eine Klasse. Für ihre eigenen Komponenten verwendet sie Klassennamen nach BEM, damit sich die Spezifität nicht weiter hochschaukelt.

   Ziel 1

2. Kapitel 2

   Lesbar auf jedem Bildschirm

   Der Entwurf sieht 18 Pixel Fliesstext und eine Typo-Skala von 1.25 vor, die Leonie in rem umsetzt. Auf grossen Bildschirmen werden die Textzeilen über 120 Zeichen lang, was sie mit einer maximalen Breite von 65ch begrenzt. Die Abstände zwischen den Karten sind doppelt so gross wie in Figma. Im Box Model der DevTools erkennt sie, dass padding und margin sich addieren, und setzt box-sizing: border-box für alle Elemente.

   Ziel 2

3. Kapitel 3

   Sofas in Karten und Raster

   Jede Produktkarte zeigt Bild, Name, einen Preis wie CHF 2490 und einen Button. Beim Ecksofa mit Schlaffunktion und Bettkasten bricht der lange Name auf drei Zeilen um, und der Button rutscht aus der Reihe. Leonie macht die Karte zu einer Flex-Spalte und schiebt den Button mit margin-top: auto nach unten. Das Seitenlayout mit Hero, Kollektion, Inspiration und Filialen legt sie mit grid-template-areas an, die Galerie mit auto-fit und minmax(240px, 1fr).

   Ziel 3Ziel 4

4. Kapitel 4

   Auf dem Handy im Zug

   Laut Webanalyse kommen 70 Prozent der Besuchenden mit dem Handy auf die Seite. Leonie baut das CSS nach Mobile First um und setzt den ersten Breakpoint bei 720 Pixel, wo die Karten im Test zu eng werden. Der Hero-Titel skaliert mit clamp(2rem, 5vw, 3.5rem) fliessend mit. Die Navigation mit sieben Punkten passt auf dem Handy nicht in eine Zeile, deshalb lässt sie diese umbrechen, statt horizontales Scrollen zu erzwingen.

   Ziel 5

5. Kapitel 5

   Herbstfarben als System

   Die Agentur liefert die Farben Terrakotta, Sand und Waldgrün als Tokens, die Leonie als Custom Properties mit Basis- und Bedeutungsnamen anlegt. Der WebAIM Contrast Checker zeigt für Terrakotta auf Sand nur 3.1:1, deshalb nutzt sie für Text eine dunklere Variante mit 5.2:1. Für Tastaturnutzende ergänzt sie einen gut sichtbaren Fokusrahmen sowie Hover- und Aktiv-Zustände. Für die Frühlingskampagne muss das Marketing jetzt nur noch sechs Variablen austauschen.

   Ziel 6

1. 1

   Wie der Browser CSS liest

   ca. 3 Std.

   Du verstehst Selektoren, Spezifität und Vererbung und lernst die DevTools als wichtigstes Werkzeug kennen.

   • Zehn Selektoren nach ihrer Spezifität ordnen und im Browser prüfen
   • Auf einer bekannten Website mit den DevTools Regeln an- und ausschalten
   • Ein kleines HTML-Dokument nach BEM mit Klassen versehen

   Trainiert Kompetenz A1A2

   Lernziel1

2. 2

   Box Model und Typografie

   ca. 3 Std.

   Du steuerst Abstände und Schrift bewusst und wählst passende Einheiten.

   • Ein Textdokument mit Typo-Skala (z.B. 1.25) und rem-Einheiten gestalten
   • Mit den DevTools das Box Model einzelner Elemente untersuchen
   • Lesbarkeit mit verschiedenen Zeilenlängen und Zeilenabständen vergleichen

   Trainiert Kompetenz B1B2

   Lernziel2

3. 3

   Flexbox

   ca. 4 Std.

   Du baust typische Komponenten mit Flexbox nach.

   • Flexbox Froggy oder ein ähnliches Lernspiel durchspielen
   • Navigation, Kartenreihe und Footer mit Flexbox umsetzen
   • Einen Button mit Icon und Text exakt vertikal zentrieren

   Trainiert Kompetenz C1C2

   Lernziel3

4. 4

   CSS Grid

   ca. 5 Std.

   Du überträgst Gestaltungsraster aus Entwürfen in CSS Grid.

   • Ein 12-Spalten-Raster aus einem Figma-Entwurf mit Grid nachbauen
   • Ein Seitenlayout mit grid-template-areas definieren
   • Eine responsive Galerie mit auto-fit und minmax bauen

   Trainiert Kompetenz D1D2D3

   Lernziel4

5. 5

   Responsive und fliessend

   ca. 4 Std.

   Du machst Layouts Mobile First responsiv und setzt fliessende Typografie ein.

   • Eine Desktop-Seite in eine Mobile-First-Version umbauen
   • Breakpoints nach Inhalt setzen und im Gerätemodus testen
   • Headlines mit clamp() skalieren

   Trainiert Kompetenz E1E2E3

   Lernziel5

6. 6

   Gestaltungssystem und Abschlussprojekt

   ca. 6 Std.

   Du baust eine komplette Seite auf Basis von Custom Properties mit allen Zuständen und prüfst sie auf Kontrast und Tastaturbedienung.

   • Design-Tokens aus einem Figma-Entwurf als Custom Properties anlegen
   • Hover-, Fokus- und Aktiv-Zustände für alle Links und Buttons definieren
   • Eine Landingpage nach Entwurf pixelgenau umsetzen und Kontraste mit dem WebAIM Checker prüfen

   Trainiert Kompetenz F1F2F3C3

   Lernziel6435

Kaskade

Regelwerk, nach dem der Browser entscheidet, welche von mehreren passenden CSS-Regeln angewendet wird.

Spezifität

Gewichtung eines Selektors. IDs wiegen mehr als Klassen, Klassen mehr als Elementnamen.

Box Model

Aufbau jedes Elements aus Inhalt, padding, border und margin.

Flexbox

CSS-Layoutmodell für die Anordnung von Elementen in einer Reihe oder Spalte.

CSS Grid

CSS-Layoutmodell für zweidimensionale Raster aus Zeilen und Spalten.

Custom Property

Selbst definierte CSS-Variable, z.B. --color-primary, die mit var() verwendet wird.

clamp()

CSS-Funktion, die einen Wert zwischen einem Minimum und Maximum fliessend anpasst.

BEM

Namenskonvention für Klassen nach Block, Element und Modifier, z.B. card__title oder card--featured.

WCAG

Internationale Richtlinien für barrierefreie Webinhalte, u.a. mit Mindestwerten für Farbkontraste.

Passende Module