CSS Grundlagen

Bevor du in die einzelnen CSS-Eigenschaften eintauchst, lohnt es sich, die Grundlagen zu verstehen. Diese Artikel-Reihe führt dich Schritt für Schritt durch die wichtigsten Konzepte — von Selektoren und dem Box-Modell bis hin zu Flexbox, Grid und responsivem Design.

Kapitel 1

Was ist CSS?

CSS gestaltet das Web. Lerne, was CSS ist, wie es mit HTML zusammenarbeitet und wie eine CSS-Regel aufgebaut ist.

Kapitel 2

CSS einbinden

Es gibt drei Wege, CSS in HTML einzubinden: Inline-Styles, internes Stylesheet und externes Stylesheet. Lerne die Unterschiede und wann du welche Methode nutzt.

Kapitel 3

Selektoren Grundlagen

CSS-Selektoren bestimmen, welche Elemente gestaltet werden. Lerne Element-, Klassen-, ID-, Attribut- und Universal-Selektoren kennen.

Kapitel 4

Selektoren Erweitert

Kombinatoren, Pseudo-Klassen und Pseudo-Elemente: Lerne erweiterte CSS-Selektoren, um HTML-Elemente noch gezielter auszuwählen und zu gestalten.

Kapitel 5

Kaskade & Spezifität

Die CSS-Kaskade bestimmt, welche Regel gewinnt. Lerne Spezifität berechnen, Vererbung verstehen und wann !important sinnvoll ist.

Kapitel 6

CSS Nesting

Verschachtele Selektoren und Media Queries direkt in CSS, ganz ohne Build-Tool. Lerne den &-Selektor, das Spezifitäts-Verhalten und die Unterschiede zu Sass.

Kapitel 7

Das Box-Modell

Jedes HTML-Element ist eine Box. Lerne Content, Padding, Border und Margin kennen und warum box-sizing: border-box zum Standard gehört.

Kapitel 8

Einheiten & Werte

Pixel, rem, em, Prozent oder Viewport-Einheiten? Lerne die wichtigsten CSS-Einheiten kennen und wann du welche verwenden solltest.

Kapitel 9

CSS Custom Properties

Definiere Variablen direkt in CSS mit Custom Properties. Lerne Scope, Fallbacks und wie du damit ein Dark/Light Theme baust.

Kapitel 10

CSS Funktionen

Berechne Werte direkt in CSS mit calc(), min(), max() und clamp(). Lerne die wichtigsten CSS-Funktionen für flexible Layouts.

Kapitel 11

Responsives Design

Baue Layouts, die auf jedem Bildschirm funktionieren. Lerne Media Queries, Mobile-First, Breakpoints und Fluid Design Grundlagen.