CSS

Kurz: Cascading Style Sheets — die Sprache, mit der das Aussehen (Farben, Abstände, Layout) von HTML-Elementen definiert wird.

Genauer: Trennt Inhalt (HTML) von Darstellung (CSS): Regeln wählen Elemente über Selektoren aus (z. B. Klassen, IDs) und weisen ihnen Eigenschaften zu. “Cascading” bezieht sich auf die Regel-Priorität, wenn mehrere Regeln auf dasselbe Element zutreffen. Moderne Layout-Systeme wie Flexbox und Grid sind heute fester Bestandteil von CSS.

Im Detail

Grundsyntax

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock:

.card {
  display: flex;
  padding: 1rem;
  background-color: #1a1a1a;
}
 
.card:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

Die Kaskade

Die “Kaskade” im Namen bezieht sich auf drei zusammenwirkende Mechanismen, die bestimmen, welche Regel gewinnt, wenn mehrere Regeln auf dasselbe Element zutreffen:

1. Spezifität: ein ID-Selektor (#header) schlägt einen Klassen-Selektor (.header), der wiederum einen einfachen Element-Selektor (div) schlägt.
2. Reihenfolge im Stylesheet: bei gleicher Spezifität gewinnt die später im Dokument definierte Regel.
3. !important: überstimmt beides, sollte aber sparsam eingesetzt werden, da es die Kaskade unvorhersehbar macht und spätere Überschreibungsversuche erschwert (wird oft als “letztes Mittel”, nicht als normale Praxis betrachtet).

Layout-Systeme im Wandel

Historisch war CSS-Layout mühsam: Entwickler zweckentfremdeten Floats (eigentlich für Textumfluss um Bilder gedacht) für ganze Seitenlayouts, was fragil und schwer wartbar war. Das änderte sich grundlegend mit zwei modernen Layout-Systemen: Flexbox (eindimensionales Layout, ideal z. B. für eine Reihe von Karten oder eine Navigationsleiste) und CSS Grid (zweidimensionales Layout, ideal für ein ganzes Seitenraster mit Zeilen UND Spalten gleichzeitig). Beide sind heute fester, gut unterstützter Bestandteil von CSS und haben Floats für Layout-Zwecke fast vollständig abgelöst.

Präprozessoren und native CSS-Features

Präprozessoren wie SASS erweiterten CSS früh um Programmierkonzepte wie Variablen, Verschachtelung und Funktionen, die reines CSS lange nicht kannte — geschrieben in einer eigenen Syntax, die vor der Auslieferung zu normalem CSS kompiliert wird. Mittlerweile kommen viele dieser Features auch nativ in CSS an: echte CSS-Variablen (--custom-property, zur Laufzeit im Browser änderbar, was mit vorkompiliertem SASS nicht möglich ist), verschachtelte Selektoren (CSS Nesting), und Container Queries (Styling abhängig von der Größe eines Elternelements statt nur des gesamten Viewports) — Trends, die den Bedarf an Präprozessoren für viele Projekte reduzieren.

Responsive Design

Media Queries erlauben CSS-Regeln, die nur ab/unter einer bestimmten Bildschirmbreite gelten (@media (min-width: 768px) { ... }) — die technische Grundlage von “Responsive Design”, bei dem dieselbe Seite auf Smartphone, Tablet und Desktop unterschiedlich, aber jeweils passend dargestellt wird, statt für jedes Gerät eine eigene Version zu pflegen.

Siehe auch: HTML, JS, SASS, Bootstrap