Zuletzt aktualisiert am 05.12.2025 8 Minuten Lesezeit

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die zur visuellen Gestaltung von Webseiten verwendet wird. CSS definiert, wie HTML-Elemente auf dem Bildschirm, auf Papier oder in anderen Medien dargestellt werden. Zusammen mit HTML und JavaScript bildet CSS die drei Kerntechnologien des World Wide Web.

Das Grundprinzip von CSS basiert auf der strikten Trennung von Inhalt und Darstellung. Während HTML die logische Struktur und Bedeutung der Inhalte definiert, ist CSS ausschließlich für die visuelle Präsentation zuständig. Diese Trennung ermöglicht es, das Erscheinungsbild einer gesamten Website zentral zu steuern und zu ändern, ohne den HTML-Code anzupassen.

Geschichte und Entwicklung von CSS

Die Entwicklung von CSS begann in den frühen 1990er Jahren, als das Web noch in den Kinderschuhen steckte. Håkon Wium Lie schlug 1994 erstmals ein Konzept für Stylesheets vor, während er am CERN arbeitete. Gemeinsam mit Bert Bos entwickelte er die Spezifikation weiter.

Wichtige Meilensteine

Die CSS-Spezifikation wurde vom W3C (World Wide Web Consortium) standardisiert und hat sich über mehrere Versionen weiterentwickelt:

1996: CSS Level 1 (CSS1) wird als W3C-Empfehlung veröffentlicht
1998: CSS Level 2 (CSS2) führt Positionierung, Media Types und das Box-Modell ein
2011: CSS 2.1 korrigiert Fehler und entfernt nicht implementierte Features
Ab 2011: CSS wird modular entwickelt - einzelne Module wie Selectors, Flexbox oder Grid haben eigene Versionsnummern
Heute: CSS ist ein lebendiger Standard mit kontinuierlichen Erweiterungen

Seit CSS3 gibt es keine monolithischen Versionen mehr. Stattdessen entwickelt das W3C verschiedene Module unabhängig voneinander weiter, wie etwa das CSS Color Module Level 5 oder das CSS Grid Layout Module Level 2.

Grundlagen der CSS-Syntax

CSS-Code besteht aus Regeln, die festlegen, welche HTML-Elemente wie dargestellt werden sollen. Jede Regel setzt sich aus einem Selektor und einem Deklarationsblock zusammen.

Aufbau einer CSS-Regel

Eine CSS-Regel besteht aus drei Kernkomponenten: Der Selektor wählt die zu formatierenden HTML-Elemente aus, die Eigenschaften definieren, welche visuellen Aspekte geändert werden, und die Werte legen die konkreten Einstellungen fest.

/* Grundlegende CSS-Regel */
selektor {
  eigenschaft: wert;
  weitere-eigenschaft: wert;
}

/* Konkretes Beispiel */
h1 {
  color: #333333;
  font-size: 2rem;
  margin-bottom: 1rem;
}

Selektor-Typen

CSS bietet verschiedene Möglichkeiten, HTML-Elemente zu selektieren. Die Wahl des richtigen Selektors ist entscheidend für wartbaren und effizienten Code.

Element-Selektoren: Wählen alle Instanzen eines HTML-Tags (p, h1, div)
Klassen-Selektoren: Wählen Elemente mit einer bestimmten Klasse (.button, .card)
ID-Selektoren: Wählen ein Element mit einer bestimmten ID (#header, #navigation)
Attribut-Selektoren: Basieren auf HTML-Attributen ([type="text"], [href^="https"])
Pseudo-Klassen: Adressieren bestimmte Zustände (:hover, :focus, :first-child)
Pseudo-Elemente: Formatieren Teile von Elementen (::before, ::after, ::first-line)
Kombinatoren: Verbinden mehrere Selektoren (Nachfahren, Kind, Geschwister)

/* Verschiedene Selektor-Typen */
p { }                    /* Element-Selektor */
.highlight { }           /* Klassen-Selektor */
#main-content { }        /* ID-Selektor */
a:hover { }              /* Pseudo-Klasse */
p::first-line { }        /* Pseudo-Element */
article > p { }          /* Kind-Kombinator */

Das Kaskaden-Prinzip

Das "Cascading" in CSS beschreibt, wie der Browser entscheidet, welche Styles angewendet werden, wenn mehrere Regeln auf dasselbe Element zutreffen. Drei Faktoren bestimmen die Priorität: Wichtigkeit, Spezifität und Quellreihenfolge.

Spezifität berechnen

Die Spezifität eines Selektors wird als Punktwert berechnet. Je spezifischer ein Selektor, desto höher seine Priorität. Das Verständnis der Spezifität hilft dir, unerwartetes CSS-Verhalten zu vermeiden.

Selektor-Typ	Punkte	Beispiel
Inline-Style	1000	`style="color: red"`
ID-Selektor	100	`#header`
Klasse, Attribut, Pseudo-Klasse	10	`.button`, `[type]`, `:hover`
Element, Pseudo-Element	1	`p`, `::before`

Bei gleicher Spezifität gewinnt die Regel, die zuletzt im Code steht. Das Schlüsselwort !important überschreibt normale Spezifität, sollte aber sparsam eingesetzt werden.

Das Box-Modell

Jedes HTML-Element wird in CSS als rechteckige Box behandelt. Das Box-Modell definiert, wie diese Box aufgebaut ist und wie sich Größe, Abstände und Ränder verhalten.

Content: Der eigentliche Inhalt des Elements (Text, Bilder)
Padding: Innerer Abstand zwischen Inhalt und Rahmen
Border: Der sichtbare Rahmen um das Element
Margin: Äußerer Abstand zu benachbarten Elementen

.card {
  /* Content-Größe */
  width: 300px;
  height: 200px;

  /* Box-Modell */
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;

  /* Gesamtbreite: 300 + 40 + 2 + 20 = 362px */
  /* Mit box-sizing: border-box bleibt width bei 300px */
  box-sizing: border-box;
}

Die Eigenschaft box-sizing: border-box ist heute Standard in modernem CSS. Sie sorgt dafür, dass Padding und Border in die angegebene Breite eingerechnet werden, was die Berechnung von Layouts erheblich vereinfacht.

Moderne Layout-Systeme

CSS bietet heute leistungsfähige Layout-Systeme, die komplexe Designs ohne Workarounds ermöglichen. Flexbox und CSS Grid haben die Webentwicklung grundlegend verändert.

Flexbox

Das Flexible Box Layout (Flexbox) ist ein eindimensionales Layout-System zur Verteilung von Elementen entlang einer Achse. Es eignet sich ideal für Navigationen, Button-Gruppen und die Zentrierung von Inhalten.

.navigation {
  display: flex;
  justify-content: space-between;  /* Horizontale Verteilung */
  align-items: center;             /* Vertikale Ausrichtung */
  gap: 1rem;                       /* Abstand zwischen Elementen */
}

.card-container {
  display: flex;
  flex-wrap: wrap;                 /* Umbruch bei Platzmangel */
}

CSS Grid

CSS Grid ist ein zweidimensionales Layout-System für komplexe, gitterbasierte Layouts. Du kannst damit Zeilen und Spalten gleichzeitig definieren und Elemente präzise platzieren.

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr 250px;  /* Sidebar-Content-Sidebar */
  grid-template-rows: auto 1fr auto;        /* Header-Main-Footer */
  gap: 20px;
  min-height: 100vh;
}

.header {
  grid-column: 1 / -1;  /* Ueber alle Spalten */
}

Interaktive Lernspiele wie Flexbox Froggy und CSS Grid Garden helfen dir, diese Layout-Systeme spielerisch zu erlernen.

Responsive Design mit Media Queries

Responsive Design sorgt dafür, dass Websites auf allen Geräten gut aussehen - vom Smartphone bis zum großen Desktop-Monitor. Media Queries ermöglichen unterschiedliche Styles basierend auf Bildschirmgröße, Ausrichtung oder anderen Geräteeigenschaften.

/* Mobile First: Basis-Styles fuer kleine Bildschirme */
.container {
  padding: 1rem;
}

/* Tablet und größer */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

Der Mobile-First-Ansatz ist heute Best Practice: Du schreibst zuerst Styles für mobile Geräte und erweiterst sie dann für größere Bildschirme mit min-width Media Queries.

CSS einbinden

Es gibt drei Möglichkeiten, CSS in ein HTML-Dokument einzubinden. Die Wahl der Methode beeinflusst Wartbarkeit, Performance und Wiederverwendbarkeit.

Externe Stylesheets (empfohlen)

Externe CSS-Dateien werden im <head> des HTML-Dokuments verlinkt. Diese Methode bietet die beste Wartbarkeit und Cache-Effizienz.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Interne Styles

CSS-Code kann auch direkt im <style>-Tag innerhalb des HTML-Dokuments stehen. Diese Methode eignet sich für Prototypen oder sehr kleine Projekte.

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

Inline-Styles

Styles können direkt am HTML-Element definiert werden. Diese Methode solltest du nur in Ausnahmefällen verwenden, da sie die Trennung von Inhalt und Darstellung aufhebt.

<p style="color: red; font-size: 16px;">Roter Text</p>

Moderne CSS-Features

CSS entwickelt sich ständig weiter. Moderne Browser unterstützen heute viele fortgeschrittene Features, die früher nur mit JavaScript oder CSS-Präprozessoren möglich waren.

CSS Custom Properties (Variablen)

Mit CSS Custom Properties kannst du wiederverwendbare Werte definieren und zentral verwalten. Im Gegensatz zu Präprozessor-Variablen werden sie zur Laufzeit ausgewertet.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing: 1rem;
  --border-radius: 4px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
  border-radius: var(--border-radius);
}

/* Dark Mode mit Custom Properties */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #5dade2;
  }
}

Weitere moderne Features

Die CSS-Spezifikation wird kontinuierlich erweitert. Viele neue Features verbessern die Möglichkeiten für Layout, Animation und responsives Design erheblich.

Container Queries: Styling basierend auf der Größe des Container-Elements statt des Viewports
Cascade Layers (@layer): Explizite Kontrolle über die Kaskaden-Ordnung
Subgrid: Grid-Ausrichtung an übergeordneten Grid-Containern
Logical Properties: Richtungsunabhängige Eigenschaften (inline-start statt left)
Scroll Snap: Native Scroll-Snapping ohne JavaScript
:has() Selektor: Parent-Selektor basierend auf Kind-Elementen

Die Browser-Unterstützung für neue CSS-Features kannst du auf Can I Use prüfen.

CSS-Präprozessoren und Frameworks

Neben purem CSS gibt es Werkzeuge, die die Entwicklung erleichtern. CSS-Präprozessoren erweitern die Sprache um Programmierfunktionen, während Frameworks vorgefertigte Komponenten bieten.

CSS-Präprozessoren

Sass und Less erweitern CSS um Variablen, Verschachtelung, Mixins und Funktionen. Der Präprozessor kompiliert den erweiterten Code zu Standard-CSS.

// SCSS (Sass-Syntax)
$primary: #3498db;

.card {
  padding: 1rem;

  &:hover {
    transform: translateY(-2px);
  }

  .title {
    color: $primary;
  }
}

Utility-First CSS

Frameworks wie Tailwind CSS verfolgen einen Utility-First-Ansatz: Statt semantischer Klassen verwendest du kleine, atomare Utility-Klassen direkt im HTML.

<!-- Tailwind CSS Beispiel -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Beide Ansätze haben Vor- und Nachteile. Präprozessoren bieten mehr Struktur, während Utility-Frameworks schnelleres Prototyping ermöglichen.

CSS in der Praxis

CSS ist eine der Kerntechnologien der Webentwicklung und wird in praktisch jedem Webprojekt eingesetzt. Wer als Fachinformatiker für Anwendungsentwicklung im Frontend-Bereich arbeiten möchte, sollte CSS sicher beherrschen.

In der Praxis arbeitest du oft mit bestehenden CSS-Codebasen, passt Designs an verschiedene Geräte an und optimierst die Performance. Gute CSS-Kenntnisse helfen auch beim Verständnis von Design-Systemen und der Zusammenarbeit mit Designern.

Quellen und weiterführende Links

MDN Web Docs: CSS - Umfassende CSS-Referenz
W3C CSS Specifications - Offizielle CSS-Standards
web.dev: Learn CSS - Moderner CSS-Kurs von Google
CSS-Tricks - Tutorials und Artikel zu CSS
Can I Use - Browser-Kompatibilität prüfen
Flexbox Froggy - Flexbox spielerisch lernen
CSS Grid Garden - CSS Grid spielerisch lernen

Zurück zum Lexikon