CSS-Spickzettel
Eine durchsuchbare, druckbare CSS-Referenz — Selektoren, das Box-Modell, Flexbox, Grid, Typografie, Transitions und moderne Funktionen. Kostenlos.
Selektoren
13.class
Alle Elemente mit der Klasse auswählen
#id
Element mit der id auswählen
a, b
Gruppe: a und b auswählen
a b
Nachfahre: b innerhalb von a
a > b
Direktes Kind b von a
a + b
Direktes Geschwister unmittelbar nach a
a ~ b
Allgemeines Geschwister b nach a
[type="text"]
Attribut-Selektor
:hover :focus
Pseudo-Klassen für Zustand
:nth-child(2n)
Jedes gerade Kind
::before ::after
Pseudo-Elemente (generierter Inhalt)
:not(.x)
Negation: alles außer .x
:is(h1, h2, h3)
Trifft jeden Selektor in der Liste
Box-Modell
7box-sizing: border-box;
Padding & Rahmen in Breite einbeziehen
margin: 0 auto;
Block horizontal zentrieren
padding: 1rem 2rem;
Vertikal 1rem, horizontal 2rem
border: 1px solid #ccc;
Breite, Stil, Farbe
border-radius: 8px;
Abgerundete Ecken
outline: 2px dashed red;
Outline (beeinflusst Layout nicht)
overflow: hidden;
Überlaufenden Inhalt abschneiden
Flexbox
8display: flex;
Flex-Container erstellen
flex-direction: row | column;
Richtung der Hauptachse
justify-content: space-between;
Entlang der Hauptachse ausrichten
align-items: center;
Entlang der Querachse ausrichten
flex-wrap: wrap;
Elemente umbrechen lassen
gap: 1rem;
Abstand zwischen Elementen
flex: 1;
Wachsen, um Platz zu füllen (1 1 0)
align-self: flex-end;
Querachse für ein Element überschreiben
Grid
8display: grid;
Grid-Container erstellen
grid-template-columns: 1fr 1fr 1fr;
Drei gleiche Spalten
repeat(3, 1fr)
Kurzform für wiederholte Tracks
minmax(200px, 1fr)
Track zwischen Min und Max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive Auto-Spalten
gap: 1rem;
Zeilen- und Spaltenabstand
grid-column: 1 / 3;
Von Linie 1 bis 3 spannen
place-items: center;
Elemente auf beiden Achsen zentrieren
Typografie
8font-family: system-ui, sans-serif;
Schriftarten-Stack
font-size: 1.125rem;
Relative Schriftgröße
font-weight: 600;
Fette Schriftstärke
line-height: 1.6;
Zeilenabstand
letter-spacing: .02em;
Laufweite
text-align: center;
Horizontale Textausrichtung
text-transform: uppercase;
Groß-/Kleinschreibung ändern
text-overflow: ellipsis;
Mit … kürzen (braucht overflow+nowrap)
Farben & Hintergrund
7color: #1f2937;
Textfarbe
background: rgb(0 0 0 / 50%);
Modernes rgb mit Alpha
background: linear-gradient(90deg,#f06,#48f);
Linearer Verlauf
opacity: .5;
Element-Transparenz
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Schlagschatten
background-size: cover;
Bild auf cover skalieren
color-mix(in srgb, red 40%, blue);
Zwei Farben mischen
Positionierung
6position: relative;
Versatz von normaler Position
position: absolute;
Relativ zum nächsten positionierten Vorfahren
position: fixed;
Relativ zum Viewport
position: sticky; top: 0;
Bleibt beim Vorbeiscrollen haften
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Stapelreihenfolge
Übergänge & Animation
5transition: all .2s ease;
Eigenschaftsänderungen animieren
transform: translateY(-4px) scale(1.05);
Verschieben, skalieren, drehen
@keyframes spin { to { transform: rotate(360deg); } }
Animation definieren
animation: spin 1s linear infinite;
Keyframe-Animation ausführen
will-change: transform;
Browser zur Optimierung anweisen
Responsive & Modernes
7@media (max-width: 768px) { ... }
Media-Query-Breakpoint
clamp(1rem, 2vw, 2rem)
Fluider Wert mit min/max
aspect-ratio: 16 / 9;
Seitenverhältnis beibehalten
var(--brand)
Custom-Property verwenden
:root { --brand: #4f46e5; }
Custom-Property definieren
container-type: inline-size;
Container-Queries aktivieren
@container (min-width: 400px) {…}
Container-Query
Kein Eintrag passt zu „:q“.
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.