CSS für Einsteiger Schulung: Webdesign und responsive Layouts

Einstieg: Wie HTML und CSS zusammenarbeiten

• Aufgabenteilung: HTML zeichnet Inhalte aus, CSS bestimmt ihre Darstellung
• Ein Stylesheet für alle Seiten: Dokumente einheitlich und änderungsfreundlich gestalten
• CSS einbinden: externe Datei mit link, style-Element und style-Attribut im Vergleich
• Erste CSS-Datei anlegen und Ordner für Styles, Bilder und Schriften strukturieren
• Relative Pfade zu Bildern und Schriften – gerechnet ab der CSS-Datei, nicht ab der HTML-Seite
• Absolute Pfade und Pfade ab der Wurzel mit /
• Bilder und Symbole einbinden: background-image, SVG-Icons und Inline-SVG
• Bilder für hochauflösende Displays: image-set(), WebP und AVIF, Dateigröße im Blick
• Entwicklertools im Browser: Regeln untersuchen, live ändern, berechnete Werte lesen
• Visual Studio Code mit Live-Vorschau, Farbwähler und CSS-Autovervollständigung einrichten

Syntax, Selektoren und Kaskade

• Wie CSS entsteht: Module statt „CSS3“, die CSS Working Group beim W3C
• Syntax und Fachbegriffe: Regel, Selektor, Deklaration, Eigenschaft und Wert
• Werte und Einheiten: px, rem, em, %, vw und ch für Zeilenlängen
• Typselektoren und der Universalselektor *
• Klassen- und ID-Selektoren – und warum Klassen fürs Gestalten meist die bessere Wahl sind
• Nachfahren-Selektoren und mehrere Selektoren mit Komma gruppieren
• Vererbung: welche Eigenschaften erben, inherit, initial und unset
• Spezifität berechnen und Konflikte in den Entwicklertools nachvollziehen
• Kaskade: Herkunft, Wichtigkeit mit !important und Reihenfolge der Regeln
• Link-Zustände mit :link, :visited, :hover, :focus-visible und :active
• Links gestalten: Unterstreichung mit text-decoration-* und gut sichtbarer Fokusrahmen
• Ausblick auf Cascade Layers mit @layer – vertieft im Seminar CSS für Entwickler

Farben und Hintergründe

• Farbangaben: Schlüsselwörter, Hex, rgb(), hsl() und das gleichmäßigere oklch()
• Eigene Farbpalette als Custom Properties wie --farbe-akzent an einer Stelle pflegen
• Farbkontrast nach WCAG 2.2 prüfen: mindestens 4,5:1 für Fließtext
• Hintergrundbilder steuern: background-size, background-position und Wiederholung
• Flexible Hintergrundbilder mit cover und passendem Bildausschnitt je Bildschirmgröße
• Verläufe mit linear-gradient() und halbtransparente Flächen für lesbaren Text auf Bildern
• Hell- und Dunkelmodus mit prefers-color-scheme, color-scheme und light-dark()

Das CSS-Box-Modell

• Box-Modell: Inhalt, padding, border und margin und wie sie die Größe bestimmen
• Block, Inline und Inline-Block: die Eigenschaft display
• Kurzschreibweisen der Box-Eigenschaften mit einem bis vier Werten
• box-sizing: border-box als Grundeinstellung – warum sie Breitenrechnungen erspart
• Fehlersuche im Box-Modell mit der Box-Ansicht der Entwicklertools
• Innen- und Außenabstände, Rahmenarten und Rundungen mit border-radius
• Abstände im Layout: zusammenfallende Außenabstände (Margin Collapsing) erkennen
• Inhaltsumhüllungen (Wrapper) mit max-width für lesbare Zeilenlängen
• Negative Außenabstände gezielt einsetzen, etwa für überlappende Bilder
• Blöcke mittig ausrichten mit margin-inline: auto
• Kopfbereich mit Titelbild: Bildausschnitt mit object-fit und aspect-ratio
• Logische Eigenschaften wie padding-inline und margin-block im Überblick

Typografie mit Webfonts

• Typografie fürs Web: Lesbarkeit, Größenhierarchie, Zeilenlänge und Weißraum
• Schriftfamilien mit font-family und robuste Ersatzschriften (System-Schriftstapel)
• Schriftgewicht und -stil mit font-weight und font-style, variable Schriften
• Eigene Webfonts mit @font-face, Format WOFF2 und font-display: swap
• Google Fonts auswählen und datenschutzfreundlich auf dem eigenen Server bereitstellen
• Schriftgröße mit font-size in rem und fließend skalierend mit clamp()
• Kurzschreibweise font und was sie stillschweigend zurücksetzt
• Textdekoration, Ausrichtung, Zeilenhöhe und Silbentrennung mit hyphens: auto
• Überschriften ausgewogen umbrechen mit text-wrap: balance
• Typografie-Stile für Überschriften, Fließtext, Zitate und Listen festlegen

Float und Positionierung

• float heute: Text um Bilder fließen lassen – nicht mehr für Seitenlayouts
• Die Eigenschaften float und clear im Zusammenspiel
• Zusammengeklappte Container: display: flow-root statt Clearfix-Hack
• Float-Layouts in älteren Seiten erkennen und Breitenfehler mit box-sizing beheben
• Positionierung mit relative, absolute, fixed und sticky
• Stapelreihenfolge mit z-index und warum Stapelkontexte manchmal stören

Layouts mit Flexbox

• Flexbox oder Grid? Eindimensionale und zweidimensionale Layouts unterscheiden
• Flex-Container und Flex-Elemente, Haupt- und Querachse
• Ausrichten und anordnen mit justify-content, align-items und order
• Flexible Größen mit flex-grow, flex-shrink und flex-basis
• Abstände mit gap und Zeilenumbruch mit flex-wrap
• Übung: Navigationsleiste und Kartenreihe mit Flexbox aufbauen

Layouts mit CSS Grid

• Grid-Container, Spalten und Zeilen, die Einheit fr
• Explizites Raster mit grid-template-columns und benannten Bereichen
• Implizites Raster und automatische Zeilen mit grid-auto-rows
• Elemente platzieren mit Rasterlinien, span und grid-area
• Grid-Inspektor in Firefox und Chrome: Linien, Bereiche und Lücken sichtbar machen
• Kachelraster ohne Media Query mit repeat(auto-fit, minmax())
• Subgrid für Karten, deren Überschriften und Buttons auf einer Linie liegen

Erweiterte Selektoren

• Überblick: Kombinatoren, Pseudoklassen, Pseudoelemente und Attributselektoren
• Kombinatoren für Beziehungen: Kind >, direkter Nachbar +, Geschwister ~
• Vorhandene Regeln mit Kombinatoren vereinfachen und Klassen einsparen
• Erstes und letztes Element: :first-child, :last-child und :nth-child()
• Pseudoelemente ::before, ::after und ::marker für Schmuck und Listenzeichen
• :is() und :has() kurz vorgestellt – ausführlich im Seminar CSS für Entwickler

Fließende und responsive Layouts

• Responsive Design: Mobile First und der Viewport-Meta-Tag
• Fließende Layouts mit Prozentwerten, max-width und min()
• Media Queries: Medientypen, Merkmale und die Bereichs-Syntax (width >= 48rem)
• Breakpoints am Inhalt statt an Gerätegrößen festlegen
• Vom einspaltigen zum mehrspaltigen Layout mit Media Queries
• Container Queries: Bausteine, die sich an ihrer verfügbaren Breite ausrichten
• Responsive Layouts testen: Gerätemodus der Entwicklertools und echte Geräte
• Animationen zurücknehmen bei prefers-reduced-motion
• Browser-Unterstützung einschätzen: Baseline-Status bei MDN lesen

CSS-Gestaltung mit Coding-Agenten

• Gestaltungsvorgaben als CSS-Datei mit Farben, Schriften und Abstandsskala, an die sich der Agent hält
• Skizze oder Screenshot als Vorlage für ein CSS-Layout, Ergebnis je Breakpoint vergleichen
• Feste Pixelbreiten, !important und absolute Positionierung im generierten CSS aufspüren
• Vorschläge des Agenten im Inspektor nachvollziehen: Welche Regel greift, welche wird überschrieben?
• Kontraste des vom Agenten gewählten Farbschemas nachmessen und korrigieren lassen

Praxisprojekt: Onepager für ein Gartencafé

• Gestaltungskonzept: Farbpalette, Schriftpaar und Abstandsskala als Custom Properties
• Kopfbereich mit Titelbild, Navigation mit Flexbox und Speisekarte im Grid
• Veranstaltungskarten mit Container Query und dunkler Farbvariante
• Abnahme auf Smartphone, Tablet und Desktop mit Kontrastprüfung