CSS-Referenz — Agentic Coding

element

Wahlt alle Elemente dieses Typs aus.

p {
  color: #333;
}

.class

Wahlt Elemente mit dieser CSS-Klasse aus.

.highlight {
  background: yellow;
}

#id

Wahlt das Element mit dieser eindeutigen ID.

#header {
  position: sticky;
}

element element

Nachfahrenselektor: alle verschachtelten Treffer.

article p {
  line-height: 1.8;
}

element > element

Kindselektor: nur direkte Kindelemente.

ul > li {
  list-style: disc;
}

:hover

Pseudo-Klasse: aktiv bei Mausuberfahrt.

a:hover {
  color: blue;
  text-decoration: underline;
}

:first-child

Wahlt das erste Kind eines Elternelements.

li:first-child {
  font-weight: bold;
}

:nth-child()

Wahlt Kinder nach Position (Zahl, odd, even, Formel).

tr:nth-child(even) {
  background: #f5f5f0;
}

::before / ::after

Pseudo-Elemente: fugt Inhalte vor/nach einem Element ein.

.note::before {
  content: "Hinweis: ";
  font-weight: bold;
}

width / height

Breite und Hohe eines Elements.

.card {
  width: 300px;
  height: auto;
}

padding

Innenabstand zwischen Inhalt und Rahmen.

.box {
  padding: 1rem;         /* alle */
  padding: 1rem 2rem;    /* oben/unten links/rechts */
}

margin

Aussenabstand zwischen Element und Nachbarn.

.section {
  margin: 2rem 0;
  margin: 0 auto;  /* zentrieren */
}

border

Rahmen um ein Element (Breite, Stil, Farbe).

.card {
  border: 1px solid #ddd;
}

box-sizing

Bestimmt, ob Padding/Border in die Breite zahlen.

*, *::before, *::after {
  box-sizing: border-box;
}

display

Legt fest, wie ein Element dargestellt wird.

display: block;   /* volle Breite */
display: inline;  /* im Textfluss */
display: flex;    /* Flexbox */
display: grid;    /* Grid */
display: none;    /* versteckt */

position

Positionierungsart des Elements.

position: static;    /* Standard */
position: relative;  /* relativ */
position: absolute;  /* absolut */
position: fixed;     /* fixiert */
position: sticky;    /* klebend */

top / right / bottom / left

Offset-Werte fur positionierte Elemente.

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
}

z-index

Stapelreihenfolge uberlappender Elemente.

.modal {
  position: fixed;
  z-index: 100;
}

display: flex

Aktiviert Flexbox fur den Container.

.container {
  display: flex;
}

flex-direction

Richtung der Hauptachse (row oder column).

.nav {
  display: flex;
  flex-direction: row;    /* Standard */
  flex-direction: column; /* vertikal */
}

justify-content

Verteilung auf der Hauptachse.

.bar {
  justify-content: flex-start;
  justify-content: center;
  justify-content: space-between;
}

align-items

Ausrichtung auf der Querachse.

.row {
  align-items: stretch;   /* Standard */
  align-items: center;
  align-items: flex-start;
}

flex-wrap

Erlaubt Umbruch in mehrere Zeilen.

.gallery {
  display: flex;
  flex-wrap: wrap;
}

gap

Abstand zwischen Flex-Kindern.

.container {
  display: flex;
  gap: 1rem;
}

flex-grow / flex-shrink

Steuert Wachstum/Schrumpfung von Flex-Kindern.

.sidebar { flex-grow: 0; flex-shrink: 0; }
.content { flex-grow: 1; }

display: grid

Aktiviert CSS Grid fur den Container.

.grid {
  display: grid;
}

grid-template-columns

Definiert Spaltenanzahl und -breite.

.grid {
  grid-template-columns: 1fr 2fr;
  grid-template-columns:
    repeat(3, 1fr);
  grid-template-columns:
    repeat(auto-fill, minmax(250px, 1fr));
}

grid-template-rows

Definiert Zeilenhohe des Grids.

.grid {
  grid-template-rows: auto 1fr auto;
}

gap

Abstand zwischen Grid-Zellen.

.grid {
  gap: 1rem;
  gap: 1rem 2rem; /* Zeile Spalte */
}

grid-column / grid-row

Platziert ein Kind uber mehrere Spalten/Zeilen.

.header {
  grid-column: 1 / -1; /* volle Breite */
}
.sidebar {
  grid-row: 2 / 4;
}

fr-Einheit

Bruchteil des verfugbaren Platzes (fraction).

/* 1/3 + 2/3 = volle Breite */
grid-template-columns: 1fr 2fr;

font-family

Schriftart(en) mit Fallback-Kette.

body {
  font-family: Georgia, serif;
}
h1 {
  font-family: 'Segoe UI', sans-serif;
}

font-size

Schriftgrosse (px, rem, em, %, clamp).

p { font-size: 1rem; }
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

font-weight

Schriftstärke (100-900, normal, bold).

strong { font-weight: 700; }
p { font-weight: 400; /* normal */ }

line-height

Zeilenhohe, beeinflusst Lesbarkeit stark.

p {
  line-height: 1.6; /* unitless empfohlen */
}

text-align

Horizontale Textausrichtung.

h1 { text-align: center; }
p  { text-align: left; }
td { text-align: right; }

text-decoration

Textdekoration (Unterstreichung usw.).

a { text-decoration: underline; }
a:hover { text-decoration: none; }

color

Textfarbe des Elements.

p { color: #222; }
a { color: var(--link); }

Hex-Werte

6-stelliger Hexadezimalwert (#RRGGBB).

color: #1a5276;
background: #f5f5f0;
border: 1px solid #ddd;

rgb()

Farbe als Rot-Grun-Blau-Werte (0-255).

color: rgb(26, 82, 118);
background: rgb(245, 245, 240);

hsl()

Farbton, Sattigung, Helligkeit (intuitiver).

color: hsl(204, 64%, 28%);
background: hsl(60, 20%, 95%);

CSS-Variablen

Wiederverwendbare Farbwerte als Custom Properties.

:root {
  --accent: #1a5276;
}
h1 { color: var(--accent); }

background-color

Hintergrundfarbe eines Elements.

.card {
  background-color: #fff;
}

background-image

Hintergrundbild oder Verlauf.

.hero {
  background-image:
    url('bg.jpg');
  background-size: cover;
  background-position: center;
}

border

Rahmen (Kurzschreibweise: Breite Stil Farbe).

.box {
  border: 1px solid #ddd;
  border-bottom: 2px solid #1a5276;
}

border-radius

Abgerundete Ecken.

.card { border-radius: 8px; }
.avatar { border-radius: 50%; }

box-shadow

Schlagschatten um ein Element.

.card {
  box-shadow:
    0 4px 12px rgba(0,0,0,0.1);
}

@media

Regeln abhangig von Bildschirmgrosse anwenden.

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Viewport-Einheiten (vw, vh)

Prozent der Viewport-Breite bzw. -Hohe.

.hero {
  height: 100vh;  /* volle Hohe */
  width: 100vw;   /* volle Breite */
}

Relative Einheiten (em, rem, %)

Skalieren relativ zur Schrift oder zum Elternelement.

p { font-size: 1rem; }     /* = 16px */
.child { width: 50%; }
.box { padding: 1.5em; }  /* relativ zur Schrift */

--name: value

Definiert eine CSS-Variable (meist in :root).

:root {
  --primary: #1a5276;
  --spacing: 1rem;
  --font-body: Georgia, serif;
}

var(--name)

Ruft den Wert einer CSS-Variable ab.

h1 {
  color: var(--primary);
  margin: var(--spacing);
  font-family: var(--font-body);
}
/* Mit Fallback: */
color: var(--accent, blue);