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. Waehrend HTML die logische Struktur und Bedeutung der Inhalte definiert, ist CSS ausschliesslich fuer die visuelle Praesentation zustaendig. Diese Trennung ermoeglicht es, das Erscheinungsbild einer gesamten Website zentral zu steuern und zu aendern, ohne den HTML-Code anzupassen.

Geschichte und Entwicklung von CSS

Die Entwicklung von CSS begann in den fruehen 1990er Jahren, als das Web noch in den Kinderschuhen steckte. Hakon Wium Lie schlug 1994 erstmals ein Konzept fuer Stylesheets vor, waehrend 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 ueber mehrere Versionen weiterentwickelt:

• 1996: CSS Level 1 (CSS1) wird als W3C-Empfehlung veroeffentlicht
• 1998: CSS Level 2 (CSS2) fuehrt 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 unabhaengig 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 waehlt die zu formatierenden HTML-Elemente aus, die Eigenschaften definieren, welche visuellen Aspekte geaendert 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 Moeglichkeiten, HTML-Elemente zu selektieren. Die Wahl des richtigen Selektors ist entscheidend fuer wartbaren und effizienten Code.

• Element-Selektoren: Waehlen alle Instanzen eines HTML-Tags (p, h1, div)
• Klassen-Selektoren: Waehlen Elemente mit einer bestimmten Klasse (.button, .card)
• ID-Selektoren: Waehlen ein Element mit einer bestimmten ID (#header, #navigation)
• Attribut-Selektoren: Basieren auf HTML-Attributen ([type="text"], [href^="https"])
• Pseudo-Klassen: Adressieren bestimmte Zustaende (: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 Prioritaet: Wichtigkeit, Spezifitaet und Quellreihenfolge.

Spezifitaet berechnen

Die Spezifitaet eines Selektors wird als Punktwert berechnet. Je spezifischer ein Selektor, desto hoeher seine Prioritaet. Das Verstaendnis der Spezifitaet hilft dir, unerwartetes CSS-Verhalten zu vermeiden.

Bei gleicher Spezifitaet gewinnt die Regel, die zuletzt im Code steht. Das Schluesselwort !important ueberschreibt normale Spezifitaet, 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 Groesse, Abstaende und Raender verhalten.

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

.card {
  /* Content-Groesse */
  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 dafuer, dass Padding und Border in die angegebene Breite eingerechnet werden, was die Berechnung von Layouts erheblich vereinfacht.

Moderne Layout-Systeme

CSS bietet heute leistungsfaehige Layout-Systeme, die komplexe Designs ohne Workarounds ermoeglichen. Flexbox und CSS Grid haben die Webentwicklung grundlegend veraendert.

Flexbox

Das Flexible Box Layout (Flexbox) ist ein eindimensionales Layout-System zur Verteilung von Elementen entlang einer Achse. Es eignet sich ideal fuer 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 fuer komplexe, gitterbasierte Layouts. Du kannst damit Zeilen und Spalten gleichzeitig definieren und Elemente praezise 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 dafuer, dass Websites auf allen Geraeten gut aussehen - vom Smartphone bis zum grossen Desktop-Monitor. Media Queries ermoeglichen unterschiedliche Styles basierend auf Bildschirmgroesse, Ausrichtung oder anderen Geraeteeigenschaften.

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

/* Tablet und groesser */
@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 fuer mobile Geraete und erweiterst sie dann fuer groessere Bildschirme mit min-width Media Queries.

CSS einbinden

Es gibt drei Moeglichkeiten, 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 fuer Prototypen oder sehr kleine Projekte.

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

Inline-Styles

Styles koennen direkt am HTML-Element definiert werden. Diese Methode solltest du nur in Ausnahmefaellen 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 staendig weiter. Moderne Browser unterstuetzen heute viele fortgeschrittene Features, die frueher nur mit JavaScript oder CSS-Praeprozessoren moeglich waren.

CSS Custom Properties (Variablen)

Mit CSS Custom Properties kannst du wiederverwendbare Werte definieren und zentral verwalten. Im Gegensatz zu Praeprozessor-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 Moeglichkeiten fuer Layout, Animation und responsives Design erheblich.

• Container Queries: Styling basierend auf der Groesse des Container-Elements statt des Viewports
• Cascade Layers (@layer): Explizite Kontrolle ueber die Kaskaden-Ordnung
• Subgrid: Grid-Ausrichtung an uebergeordneten Grid-Containern
• Logical Properties: Richtungsunabhaengige Eigenschaften (inline-start statt left)
• Scroll Snap: Native Scroll-Snapping ohne JavaScript
• :has() Selektor: Parent-Selektor basierend auf Kind-Elementen

Die Browser-Unterstuetzung fuer neue CSS-Features kannst du auf Can I Use pruefen.

CSS-Praeprozessoren und Frameworks

Neben purem CSS gibt es Werkzeuge, die die Entwicklung erleichtern. CSS-Praeprozessoren erweitern die Sprache um Programmierfunktionen, waehrend Frameworks vorgefertigte Komponenten bieten.

CSS-Praeprozessoren

Sass und Less erweitern CSS um Variablen, Verschachtelung, Mixins und Funktionen. Der Praeprozessor 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 Ansaetze haben Vor- und Nachteile. Praeprozessoren bieten mehr Struktur, waehrend Utility-Frameworks schnelleres Prototyping ermoeglichen.

CSS in der Praxis

CSS ist eine der Kerntechnologien der Webentwicklung und wird in praktisch jedem Webprojekt eingesetzt. Wer als Fachinformatiker fuer Anwendungsentwicklung im Frontend-Bereich arbeiten moechte, sollte CSS sicher beherrschen.

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

Quellen und weiterfuehrende 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-Kompatibilitaet pruefen
• Flexbox Froggy - Flexbox spielerisch lernen
• CSS Grid Garden - CSS Grid spielerisch lernen