CSS

Gib deinen Seiten etwas Stil

CSS verwandelt ein rohes Dokument in eine ausgefeilte Oberfläche. Selektoren, das Box-Modell, Flexbox, Grid und responsives Design, dann Animationen und CSS-Architektur: Dieser Lernpfad deckt alles ab, was du brauchst, um mit Methode zu gestalten.

Grundlagen

Anfänger - die Basics, Schritt für Schritt

• CSS mit einer Seite verbindenEntdecke, was CSS ist, wie du es mit einer HTML-Seite verbindest und wie du deine allererste Regel schreibst.
• Grundlegende Selektoren und FarbenLerne, Elemente mit Element-, Klassen- und ID-Selektoren gezielt anzusprechen, und weise ihnen dann Farben zu.
• Das Box-ModellVerstehe, wie jedes Element eine Box aus Inhalt, padding, border und margin ist, und meistere box-sizing.
• Text und SchriftenWähle eine Schrift mit font-family und passe dann Größe, Stärke und Zeilenabstand an, damit der Text angenehm zu lesen ist.
• Erste LayoutsUnterscheide Block-Elemente von Inline-Elementen und lerne die klassischen Techniken, um ein Element zu zentrieren.

Fortschritt

Mittelstufe - echte Projekte bauen

• Kaskade, Spezifität und VererbungLerne mit der Spezifität vorherzusagen, welche CSS-Regel gewinnt, und nutze die Vererbung, um weniger Code zu schreiben.
• Flexbox: Achsen, justify/align, gap, flex-growBeherrsche die zwei Achsen von Flexbox, um deine Elemente in alltäglichen Layouts auszurichten, zu zentrieren und zu verteilen.
• Grid: Spalten, Zeilen, BereicheBaue Galerien und komplette Seitenlayouts mit den Spalten, Zeilen und benannten Bereichen von CSS Grid.
• Positionierung: relative, absolute, fixed, sticky, z-indexVerankere Badges, Kopfzeilen und Modals genau dort, wo du sie haben willst, mit CSS-Positionen und einer gut verwalteten z-index-Skala.
• Responsive Design: Media Queries, relative EinheitenPasse deine Oberflächen an jede Bildschirmgröße an, mit dem Mobile-First-Ansatz, Media Queries und den Einheiten rem, % und vw.

Fortgeschritten

Geübt - fortgeschrittene Muster und Performance

• CSS-Variablen und die Funktionen calc/clampBeherrsche Custom Properties, wie sie zur Laufzeit innerhalb der Kaskade aufgelöst werden, und die Funktionen calc() und clamp() für flüssige Oberflächen.
• Übergänge und Animationen: @keyframes, transform, TimingAnimiere auf dem Compositor mit transform und opacity, strukturiere deine @keyframes und respektiere die Bewegungspräferenzen der Nutzenden.
• Moderne Selektoren: :has, :is, :where, fortgeschrittenes :nth-childNutze die neuen funktionalen Pseudoklassen, um anhand des Inhalts auszuwählen, Selektoren zu gruppieren, ohne die Spezifität aufzublähen, und komplexe Muster gezielt anzusprechen.
• CSS-Architektur: BEM, Utility-First, DateiorganisationVergleiche BEM und den Utility-First-Ansatz, ihre echten Kompromisse im Team, und strukturiere deine Dateien mit Cascade Layers.
• Container Queries und CSS-NestingMach deine Komponenten responsiv gegenüber ihrem Container statt gegenüber dem Viewport und strukturiere deine Stylesheets mit nativem Nesting.

Meisterschaft

Experte - Architektur, Internals und Grenzfälle

• Die Rendering-Pipeline: Reflow, Repaint, CompositingVerstehe die vier Phasen des Browser-Renderings, damit du genau weißt, welche CSS-Eigenschaften teuer sind und wie will-change unter der Haube funktioniert.
• Cascade Layers (@layer) und @scopeBeherrsche die zwei neuen Kaskadenkriterien - Layers und Scope-Nähe -, um deine Stile ohne Spezifitäts-Kriege zu strukturieren.
• Farben und fortgeschrittene Funktionen: oklch, color-mix, min/maxNutze perzeptuelle Farbräume, die relative Farbsyntax und typisierte Mathematik-Funktionen, um Designsysteme zu bauen, die der Browser für dich berechnet.
• Experten-Grids: subgrid, auto-fit und minmaxBaue selbstanpassende Grids ohne Media Queries und richte verschachtelte Komponenten mit subgrid an den Tracks des Elternteils aus.
• Moderne Interaktionen: scroll-snap, View TransitionsOrchestriere magnetisches Scrollen, vom Browser animierte Zustandsübergänge und die konsequente Beachtung von prefers-reduced-motion.