CSS Cheatsheet

Selektoren

* { … } Universal

p { … } Typ-Selektor

.klasse { … } Klassen-Selektor

#id { … } ID-Selektor

a:hover { … } Pseudo-Klasse

p::before { … } Pseudo-Element

div > p Direktes Kind

div p Nachfahre

div + p Direkt danach

[type="text"] Attribut-Selektor

li:nth-child(2n+1) Ungerade Kinder

p:not(.active) Negations-Selektor

Box Model

width: 300px Breite

height: auto Höhe

padding: 10px 20px Innenabstand (T/R/B/L)

margin: 0 auto Außenabstand / zentriert

border: 1px solid #ccc Rahmen

border-radius: 8px Abgerundete Ecken

box-sizing: border-box Padding in Breite inkl.

overflow: hidden | auto | scroll Überlauf

box-shadow: 0 4px 12px rgba(0,0,0,.3) Schatten

Typografie

font-family: 'Inter', sans-serif Schriftfamilie

font-size: 1rem Schriftgröße

font-weight: 400 | 700 Schriftstärke

line-height: 1.6 Zeilenhöhe

letter-spacing: 0.05em Buchstabenabstand

text-align: left | center | right Ausrichtung

text-transform: uppercase Groß-/Kleinschreibung

text-decoration: none Unterstreichung

white-space: nowrap Kein Zeilenumbruch

Farben & Hintergrund

color: #e2e8f0 Textfarbe (Hex)

color: rgb(226,232,240) Textfarbe (RGB)

color: rgba(255,255,255,.5) Mit Transparenz

color: hsl(220 13% 91%) HSL-Farbe

background-color: transparent Hintergrundfarbe

background-image: url("img.png") Hintergrundbild

background: linear-gradient(135deg, #f97316, #fbbf24) Farbverlauf

opacity: 0.5 Transparenz gesamt

Flexbox

display: flex Flex-Container

flex-direction: row | column Hauptachse

justify-content: center | space-between Hauptachse ausrichten

align-items: center | stretch Querachse ausrichten

flex-wrap: wrap Umbruch erlauben

gap: 16px Abstand zwischen Items

flex: 1 1 auto grow / shrink / basis

align-self: flex-end Einzelnes Item ausrichten

order: -1 Reihenfolge ändern

CSS Grid

display: grid Grid-Container

grid-template-columns: 1fr 2fr Spalten definieren

grid-template-columns: repeat(3, 1fr) 3 gleiche Spalten

grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) Responsive Spalten

grid-template-rows: auto 1fr auto Zeilen definieren

gap: 20px Abstände

grid-column: 1 / 3 Spalten überspannen

grid-area: header Benannter Bereich

place-items: center Inhalt zentrieren

Positionierung

position: static Standard (kein offset)

position: relative Relativ zum Flow

position: absolute Relativ zum Elternteil

position: fixed Relativ zum Viewport

position: sticky Bleibt beim Scrollen

top: 0; left: 0 Offset-Werte

z-index: 10 Stapelreihenfolge

display: none | block | inline Darstellungsart

Transitions & Animationen

transition: all 0.3s ease Übergang

transition: color 0.2s, transform 0.3s Mehrere Übergänge

transform: translateX(10px) Verschieben

transform: scale(1.05) Skalieren

transform: rotate(45deg) Drehen

animation: name 1s ease infinite Animation anwenden

@keyframes name { from{} to{} } Keyframes definieren

animation-delay: 0.5s Verzögerung

CSS Variablen Custom Props

:root { --color: #60a5fa; } Variable definieren

color: var(--color) Variable nutzen

var(--color, #fallback) Mit Fallback

calc(100% - 40px) Berechnung

clamp(1rem, 3vw, 2rem) Min / pref / max Wert

min(50%, 400px) / max() Min-/Max-Funktion

Responsive / Media Queries

@media (max-width: 768px) { … } Mobil ≤ 768px

@media (min-width: 1024px) { … } Desktop ≥ 1024px

@media (prefers-color-scheme: dark) Dark-Mode-Abfrage

@media (prefers-reduced-motion: reduce) Bewegung reduzieren

@media print { … } Druckansicht

rem | em | vw | vh | % Relative Einheiten