CSS Referenz

Alle CSS-Eigenschaften auf einen Blick, kompakt, auf Deutsch und mit praktischen Code-Beispielen. Jeder Eintrag enthält Syntax, Werte und Live-Previews, die das Ergebnis direkt im Browser zeigen.

Stöbere durch die Kategorien oder nutze die Grundlagen-Artikel weiter unten, wenn du CSS von Anfang an lernen möchtest.

Grundlagen

Bevor du in die einzelnen CSS-Eigenschaften eintauchst, lohnt es sich, die Grundlagen zu verstehen. Diese Artikel führen dich Schritt für Schritt durch die wichtigsten Konzepte.

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.

Box-Modell

Das Box-Modell ist die Grundlage jedes CSS-Layouts. Hier findest du alles zu Abständen, Rahmen und Dimensionen von Elementen.

Display & Sichtbarkeit

Mit diesen Eigenschaften steuerst du, ob und wie Elemente angezeigt werden, vom kompletten Ausblenden bis zum Wechsel des Anzeigeverhaltens.

content display opacity visibility

Flexbox

Flexbox macht eindimensionale Layouts einfach. Elemente nebeneinander anordnen, zentrieren oder gleichmäßig verteilen, alles mit wenigen Zeilen CSS.

flexbox container flexbox ausrichtung flex-items flexbox praxis-layouts

Grid

CSS Grid ist das mächtigste Layout-System für zweidimensionale Anordnungen. Zeilen, Spalten und Bereiche lassen sich flexibel definieren.

grid container grid template areas grid platzierung grid auto flow grid ausrichtung subgrid grid praxis-layouts

Positionierung

Mit Positionierungs-Eigenschaften platzierst du Elemente gezielt auf der Seite, ob fixiert, absolut oder relativ zum normalen Dokumentfluss.

position z-index float & clear

Selektoren

Moderne Selektoren wie :has() wählen Elemente anhand ihres Inhalts oder ihrer Umgebung aus. Hier findest du Pseudo-Klassen, die über die Grundlagen hinausgehen.

:has()

Farben & Hintergründe

Farben, Hintergrundbilder und Verläufe: diese Eigenschaften bestimmen das visuelle Erscheinungsbild deiner Elemente.

color background grundlagen background erweitert farbverläufe accent-color

Typografie

Schriftarten wählen, Texte formatieren und Zeilenumbrüche steuern. Diese Eigenschaften geben deinen Texten das richtige Aussehen.

Schriftart

font-family font-size font-weight font-style @font-face

Textformatierung

text-align text-decoration text-transform text-shadow line-height letter-spacing vertical-align

Textumbruch

white-space text-wrap word-break text-overflow writing-mode

Listen & Tabellen

Aufzählungszeichen anpassen, Listentypen ändern oder Tabellen-Rahmen steuern. Hier findest du die passenden CSS-Eigenschaften.

list-style counter tabellen-styling

Animationen

Mit Transitions und Keyframe-Animationen bringst du Bewegung in deine Seite, von sanften Übergängen bis zu komplexen Animationsabläufen.

transition animation animation erweitert animation praxis

Transformationen

Elemente drehen, skalieren, verschieben oder mit Schatten und Filtern versehen. Diese Eigenschaften erzeugen visuelle Tiefe und Dynamik.

transform 2d transform 3d box-shadow filter clip-path blend modes

Responsive Design

Responsive Design sorgt dafür, dass deine Seite auf allen Bildschirmgrößen gut aussieht. Hier findest du Media Queries und verwandte Techniken.

@media media features @container object-fit aspect-ratio

Interaktion

Cursor-Styles, Scroll-Verhalten und Auswahlmöglichkeiten: diese Eigenschaften steuern, wie Nutzer mit deiner Seite interagieren.

cursor pointer-events user-select scroll-verhalten scrollbar

Spalten

Mit CSS Columns erstellst du mehrspaltige Layouts, ähnlich wie in Zeitungen oder Magazinen, ganz ohne Flexbox oder Grid.

columns column-styling