Visuelle CSS-Referenz
CSS vollständig erklärt – mit Code & Live-Demo
Fünf Kapitel, jede Eigenschaft mit Code-Beispiel und visueller Erklärung.
Interaktive Demos für den schnellen Zugriff im Arbeitsalltag.
Selektoren
Die Basis-Selektoren. element trifft alle Tags dieses Typs, .klasse alle Elemente mit dem Attribut, #id genau ein Element. * trifft alles.
/* Alle <p>-Tags */ p { color: steelblue; } /* Alle mit class="card" */ .card { border-radius: 8px; } /* Genau ein Element */ #logo { font-weight: 900; } /* Universalselektor */ * { box-sizing: border-box; }
Beschreiben die Beziehung zwischen Elementen: Nachfahren, direkte Kinder, direkt benachbartes Geschwister, alle folgenden Geschwister.
/* Leerzeichen: alle Nachfahren */ nav a { color: blue; } /* > direkte Kinder */ ul > li { list-style: none; } /* + direkt benachbarte Geschwister */ h2 + p { margin-top: 0; } /* ~ alle folgenden Geschwister */ h2 ~ p { color: gray; }
Treffen Elemente anhand ihrer HTML-Attribute – exakt, nach Anfang, Ende oder Teilstring. Ideal für Links, Input-Typen und data-*-Attribute.
[disabled] { opacity: .4; } [type="email"] { border: 1px solid blue; } [class*="nav"] { display: flex; } a[href^="https"] { color: green; } a[href$=".pdf"]::after { content: " 📄"; }
Zustands-Pseudo-Klassen reagieren auf Nutzerinteraktion. :focus-visible ist die modernere Variante – zeigt den Fokus-Ring nur bei Tastaturnavigation.
a:hover { color: royalblue; } a:visited { color: purple; } input:focus { outline: none; box-shadow: 0 0 0 3px royalblue; } button:focus-visible { outline: 2px solid royalblue; } input:valid { border-color: green; } input:invalid { border-color: red; } input:disabled { opacity: .5; }
:focus-Styles ohne Ersatz – das schadet der Barrierefreiheit. Nutze :focus-visible für Tastaturnutzer.Struktur-Pseudo-Klassen selektieren Elemente anhand ihrer Position. :nth-child() akzeptiert Zahlen, even/odd und Formeln wie 2n+1.
li:first-child { font-weight: 700; } li:last-child { border: none; } li:nth-child(even) { background: #f5f5f0; } li:nth-child(odd) { } li:nth-child(3n) { color: blue; } li:nth-child(-n+3) { /* erste 3 */ } li:nth-last-child(2) { /* vorletztes */ } p:only-child { font-size: 1.2rem; }
- Listenelement 1
- Listenelement 2
- Listenelement 3
- Listenelement 4
- Listenelement 5
- Listenelement 6
:not() schließt aus, :is() fasst zusammen, :has() ist der Eltern-Selektor – trifft ein Element wenn ein bestimmtes Kind existiert. Seit 2023 in allen Browsern verfügbar.
li:not(:first-child) { border-top: 1px solid #eee; } :is(h1, h2, h3) { font-weight: 800; line-height: 1.2; } /* Card mit Bild → kein Top-Padding */ .card:has(img) { padding-top: 0; } /* Form mit ungültigem Pflichtfeld */ form:has(input:required:invalid) { border-color: red; }
kein Bild → ✗
enthält <img>
Pseudo-Elemente (doppelter Doppelpunkt) erzeugen oder selektieren Teile eines Elements. ::before und ::after benötigen immer content.
.badge::before { content: "★ "; color: gold; } p::first-line { font-weight: 700; } input::placeholder { color: #aaa; font-style: italic; } ::selection { background: royalblue; color: #fff; } li::marker { color: tomato; font-size: 1.1em; }
- Eintrag eins – ::marker in Orange
- Eintrag zwei
Box-Modell
Jedes HTML-Element ist eine Box mit vier Schichten: Inhalt, Padding (innen), Border und Margin (außen). Mit box-sizing: border-box wird padding/border in die Breite eingerechnet.
.box { /* margin: oben rechts unten links */ margin: 16px; margin: 8px 16px; /* oben/unten links/rechts */ margin-top: 24px; margin: auto; /* horizontal zentrieren */ /* padding identisch aufgebaut */ padding: 1rem 1.5rem; /* border: Stärke Stil Farbe */ border: 2px solid #333; border-radius: 8px; /* Breite INKL. padding + border */ box-sizing: border-box; width: 300px; }
width / height
* { box-sizing: border-box } sollte in jedem Projekt als globaler Reset stehen – verhindert unerwartete Größenberechnungen.Dimensionen mit fixen Werten, Prozent oder clamp() für fluid responsive Größen. overflow bestimmt, was passiert wenn der Inhalt größer als die Box ist.
.box { width: 300px; width: 50%; width: fit-content; min-width: 200px; max-width: 960px; /* Fluid: min → preferred → max */ width: clamp(200px, 50%, 800px); height: 200px; min-height: 100vh; overflow: visible; /* Standard */ overflow: hidden; overflow: scroll; overflow: auto; /* Scroll nur wenn nötig */ }
Bestimmt das Layout-Verhalten eines Elements. block nimmt volle Breite, inline fließt im Text mit, inline-block kombiniert beides. none versteckt vollständig.
display: block; /* volle Breite, neue Zeile */ display: inline; /* im Textfluss, kein w/h */ display: inline-block; /* inline + Größe setzbar */ display: flex; /* Flexbox-Container */ display: grid; /* Grid-Container */ display: none; /* unsichtbar + kein Platz */ display: contents; /* Box selbst entfällt */
border-radius rundet Ecken ab (bis zu Ellipsen). outline ist wie border, aber außerhalb der Box ohne Platz zu belegen. visibility: hidden versteckt, behält aber den Platz.
.box { border-radius: 8px; border-radius: 50%; /* Kreis/Oval */ border-radius: 4px 12px 8px 20px; /* jede Ecke */ outline: 2px solid royalblue; outline-offset: 3px; /* Abstand von Border */ visibility: visible; /* Standard */ visibility: hidden; /* unsichtbar, Platz bleibt */ opacity: 0; /* transparent, Platz bleibt */ opacity: .5; /* halbdurchsichtig */ opacity: 1; /* Standard */ }
Layout – Flexbox, Grid & Position
Flexbox
Legt Hauptachse und Umbruchverhalten fest. flex-flow ist die Kurzform für beide Eigenschaften zusammen.
.container { display: flex; flex-direction: row; /* → Standard */ flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; /* Kurzform: */ flex-flow: row wrap; }
Ausrichtung entlang Haupt- und Querachse. align-self erlaubt einzelnen Kindern, vom Container-Wert abzuweichen.
.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; align-items: stretch | flex-start | flex-end | center | baseline; align-content: flex-start; /* mehrere Zeilen */ } .child { align-self: flex-end; }
Kind-Eigenschaften für Wachstum, Schrumpfen und Startgröße. gap setzt Abstände zwischen Elementen – ohne Margin-Probleme an den Rändern.
.a { flex: 1; } /* = 1 1 0% */ .b { flex: 2; } /* doppelt */ .c { flex: 0 0 100px; } /* fix 100px */ .d { flex: auto; } /* = 1 1 auto */ .e { flex: none; } /* = 0 0 auto */ .container { gap: 16px; } .container { gap: 8px 24px; } /* row col */
CSS Grid
Definiert die Spalten- und Zeilenstruktur. Die fr-Einheit verteilt verfügbaren Platz proportional. repeat(auto-fill, minmax()) schafft responsive Layouts ohne Media Queries.
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-columns: 200px 1fr 2fr; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-rows: 60px 1fr 60px; grid-template-areas: "header header" "sidebar main" "footer footer"; } header { grid-area: header; }
Positioniert Kinder auf Grid-Linien oder lässt sie mehrere Tracks überspannen. place-items: center ist das eleganteste "perfekte Zentrieren" in CSS.
.wide { grid-column: 1 / span 2; } .tall { grid-row: 1 / span 2; } .full { grid-column: 1 / -1; } /* Perfektes Zentrieren: */ .center { display: grid; place-items: center; } .special { place-self: end start; }
Position
Bestimmt wie ein Element im Dokumentfluss sitzt. Kombiniert mit top, right, bottom, left und z-index.
position: static; /* Standard */ position: relative; /* Offset, bleibt im Fluss */ position: absolute; /* Aus Fluss, rel. zu posit. Vorfahren */ position: fixed; /* Relativ zum Viewport */ position: sticky; /* Haftet beim Scrollen */ top: 16px; right: 0; z-index: 100;
absolute auf das gesamte Dokument – fast immer ein Bug.Typografie
Die Grundlage jeder Typografie. font-family definiert Fallback-Ketten. font-size besser in rem als px – respektiert Nutzer-Einstellungen.
body { font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; /* = 16px Standard */ font-weight: 400; /* 100–900 */ font-style: normal; /* italic | oblique */ } h1 { font-size: 2.5rem; font-weight: 800; } /* Fluid font-size: */ h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
line-height ohne Einheit ist am besten (relativ zur Schriftgröße). Für Fließtext empfehlen sich Werte zwischen 1.5 und 1.75.
p { line-height: 1.6; /* ohne Einheit = best practice */ letter-spacing: .05em; /* em relativ zur Schriftgröße */ word-spacing: .1em; text-align: left; /* right | center | justify */ text-transform: none; /* uppercase | lowercase | capitalize */ text-indent: 1.5em; /* erste Zeile einrücken */ white-space: nowrap; /* kein Umbruch */ hyphens: auto; /* Silbentrennung */ }
Textfarbe, Dekorationen und Überlaufverhalten. text-overflow: ellipsis zeigt „…" bei zu langem Text – benötigt overflow: hidden und white-space: nowrap.
a { color: royalblue; text-decoration: underline; text-decoration: none; text-decoration-color: coral; text-underline-offset: 3px; } /* Ellipsis-Trick */ .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .caps { font-variant: small-caps; }
CSS-Variablen mit --name definieren, mit var() nutzen. Vererbung funktioniert wie bei anderen CSS-Properties – perfekt für Themes und Konsistenz.
:root { --color-primary: #2563eb; --font-size-base: 1rem; --radius: 8px; --shadow: 0 2px 8px rgba(0,0,0,.1); } .button { background: var(--color-primary); border-radius: var(--radius); /* Fallback-Wert: */ color: var(--text-color, #fff); } /* Überschreiben per Klasse: */ .dark { --color-primary: #818cf8; }
Effekte
Schatten können gestapelt, farbig und nach innen (inset) gesetzt werden. Mehrere Schatten durch Komma trennen für weiche, realistische Effekte.
.card { /* x y blur spread farbe */ box-shadow: 0 2px 8px rgba(0,0,0,.12); /* Gestapelt – weicher Effekt */ box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.1); /* Innen-Schatten */ box-shadow: inset 0 2px 6px rgba(0,0,0,.15); /* Farbiger Glow */ box-shadow: 0 0 20px rgba(37,99,235,.4); } h1 { text-shadow: 0 2px 4px rgba(0,0,0,.3); }
Hintergründe mit Farben, Verläufen und Bildern. Mehrere Hintergründe durch Komma stapelbar. Mit background-clip: text lassen sich Farbverläufe auf Text anwenden.
.box { background-color: #2563eb; background-image: url(bild.jpg); background-size: cover | contain | 100%; background-position: center; background-repeat: no-repeat; } .grad { background: linear-gradient(135deg, #667eea, #764ba2); background: radial-gradient(circle, #ff6b6b, #feca57); } /* Text-Verlauf: */ .text-grad { background: linear-gradient(90deg, #e86c2c, #9333ea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Weiche Übergänge bei CSS-Wertänderungen. Kurzform: transition: property duration easing delay. Mehrere Eigenschaften durch Komma trennen.
.btn { background: royalblue; transition: background .3s ease; /* property duration easing delay */ } .btn:hover { background: navy; } /* Mehrere Eigenschaften: */ .card { transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.15); } /* Easing-Funktionen: */ ease | ease-in | ease-out | ease-in-out linear | cubic-bezier(x1,y1,x2,y2)
Transformiert Elemente ohne den Dokumentfluss zu beeinflussen. Kombinierbar durch Leerzeichen. Mit transform-origin den Ankerpunkt ändern.
.el { transform: translateX(20px); transform: translateY(-10px); transform: translate(20px, -10px); transform: scale(1.2); transform: rotate(45deg); transform: skew(10deg); /* Kombiniert: */ transform: translateY(-4px) scale(1.05); transform-origin: top left; }
CSS-Animationen mit @keyframes definieren, mit animation anwenden. Kurzform: name duration easing delay iterations direction fill-mode.
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .el { animation: pulse 1.5s ease-in-out infinite; } /* Einzelne Eigenschaften: */ .el { animation-name: pulse; animation-duration: 1.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; animation-play-state: paused; }
CSS-Filter ändern die visuelle Darstellung eines Elements. backdrop-filter wirkt auf den Hintergrund dahinter – ideal für Glasmorphismus-Effekte.
.img { filter: blur(4px); filter: brightness(1.2); filter: contrast(1.5); filter: grayscale(100%); filter: saturate(2); filter: hue-rotate(90deg); filter: drop-shadow(…); /* Kombiniert: */ filter: brightness(1.1) saturate(1.3); } /* Glasmorphismus: */ .glass { background: rgba(255,255,255,.2); backdrop-filter: blur(12px); }
Filter wird angewendet
Was ist die CSS-Referenz?
Die CSS-Referenz ist ein kompaktes Nachschlagewerk für alle wesentlichen CSS-Eigenschaften, die du im Webdesign-Alltag brauchst. Statt dich durch endlose Dokumentationen zu scrollen oder zwischen mehreren Tabs hin- und herzuspringen, findest du hier die wichtigsten Properties übersichtlich sortiert, kurz erklärt und mit praxisnahen Werten versehen.Das Prinzip: schnell finden, sofort verstehen, direkt einsetzen. Jede Eigenschaft wird mit ihrer Syntax, den gängigsten Werten und einem knappen Hinweis zum Einsatzzweck aufgeführt. Kein Ballast, keine akademischen Abhandlungen – sondern das, was du an einem normalen Arbeitstag tatsächlich nachschlagen willst.
Warum eine eigene CSS-Referenz?
Die offizielle CSS-Spezifikation ist umfassend, aber auch umfangreich. MDN Web Docs sind hervorragend, aber manchmal brauchst du nicht den kompletten Artikel mit Browser-Kompatibilitätstabelle und zwölf Codebeispielen.
Genau diese Lücke füllt die CSS-Referenz. Sie ist das Äquivalent zum Spickzettel, den du dir früher neben die Tastatur gelegt hast – nur aktuell, durchsuchbar und immer griffbereit.
Dabei geht es nicht darum, MDN oder die W3C-Spezifikation zu ersetzen. Es geht um die alltägliche Arbeitserleichterung: den schnellen Zugriff auf das Wesentliche, ohne Umwege.
Was die CSS-Referenz abdeckt
Von Layout-Eigenschaften wie Flexbox und Grid über Typografie, Farben und Hintergründe bis hin zu Transitions, Transforms und modernen Features wie Container Queries oder color-mix(). Die Referenz wächst mit dem Webstandard mit und bildet den aktuellen Stand der Technik ab.
Die Einträge sind nach Kategorien gegliedert, sodass du verwandte Eigenschaften im Zusammenhang siehst. Wer align-items nachschlägt, findet justify-content und place-items gleich nebenan. Das fördert nicht nur das schnelle Finden, sondern auch das tiefere Verständnis dafür, wie CSS-Eigenschaften zusammenspielen.
Für wen ist die CSS-Referenz gedacht?
Für alle, die regelmäßig mit CSS arbeiten. Einsteiger, die sich einen Überblick über die verfügbaren Möglichkeiten verschaffen wollen. Fortgeschrittene, die eine bestimmte Syntax schnell bestätigen möchten. Und Profis, die auch nach Jahren im Geschäft nicht jede Eigenschaft auswendig kennen – weil das schlicht niemand tut.
Gutes CSS entsteht nicht aus dem Gedächtnis, sondern aus dem Verständnis. Diese Referenz liefert die Grundlage für beides.