Buzzmatic

CSS-Grundlagen: Websites gestalten und strukturieren

CSS bestimmt, wie eine Website aussieht. Hier lernst du den Aufbau von CSS-Regeln, die wichtigsten Selektoren und moderne Layout-Techniken wie Flexbox und Grid kennen.

Beginner6 min readLast updated: July 13, 2026

What you will learn

  • Was CSS ist und warum Inhalt und Präsentation getrennt werden
  • Wie der Browser aus CSS die Darstellung erzeugt
  • Wie eine CSS-Regel aus Selektor und Deklaration aufgebaut ist
  • Welche Selektoren es gibt und wie Kaskade, Spezifität und Vererbung wirken
  • Wie du CSS einbindest und welche modernen Layout-Techniken es gibt

Was ist CSS?

CSS steht für Cascading Style Sheets und ist die Stylesheet-Sprache, mit der du das Aussehen von Webseiten festlegst. Während HTML die Struktur und Bedeutung von Inhalten definiert, bestimmt CSS, wie diese Inhalte dargestellt werden – auf dem Bildschirm, im Ausdruck oder per Sprachausgabe. Neben HTML und JavaScript ist CSS eine der drei Kernsprachen des offenen Webs; seine Standardisierung treibt das World Wide Web Consortium (W3C) voran.

Die Kernidee: Trennung von Inhalt und Präsentation

Ein zentraler Grundsatz modernen Webdesigns ist die Trennung von Inhalt (HTML) und Präsentation (CSS). Früher wurden Formatierungen direkt in den HTML-Code eingebettet, was zu unübersichtlichem, schwer wartbarem Code führte. Mit CSS kümmert sich HTML nur noch um Struktur, CSS ausschließlich um das visuelle Erscheinungsbild. Das bringt klare Vorteile:

  • Wartbarkeit: Design-Änderungen laufen zentral über die CSS-Datei, nicht über jedes einzelne HTML-Dokument.
  • Flexibilität: Derselbe Inhalt lässt sich mit verschiedenen Stylesheets unterschiedlich darstellen.
  • Sauberer Code: HTML-Dokumente bleiben schlank und auf ihre Struktur fokussiert.
  • Barrierefreiheit: Inhalte bleiben auch ohne CSS zugänglich, etwa für Screenreader.

Wie funktioniert CSS?

Wenn ein Browser eine Seite lädt, durchläuft er mehrere Schritte, bis der Inhalt sichtbar wird:

  1. HTML-Parsing und DOM: Der Browser liest das HTML und baut daraus das Document Object Model (DOM), eine Baumstruktur aller Elemente.
  2. Ressourcen laden: Bilder, Skripte und CSS-Dateien werden geladen.
  3. CSS-Parsing: Die Stilregeln werden analysiert und vorbereitet.
  4. Render Tree: Der Browser kombiniert DOM und CSS-Regeln und ermittelt pro Element die geltenden Stile – unter Berücksichtigung von Kaskade, Spezifität und Vererbung.
  5. Layout (Reflow): Größe und Position jedes Elements werden berechnet.
  6. Painting: Die Elemente werden mit ihren Stilen auf dem Bildschirm gezeichnet.

Der Aufbau einer CSS-Regel

Jede CSS-Regel besteht aus einem Selektor und einem Deklarationsblock in geschweiften Klammern. Der Block enthält eine oder mehrere Deklarationen, jeweils aus einer Eigenschaft (Property) und einem Wert (Value), getrennt durch einen Doppelpunkt und beendet mit einem Semikolon.

Hier ist h2 der Selektor, der angibt, auf welche Elemente die Regel wirkt. font-family ist eine Eigenschaft, Verdana ihr Wert.

Der Aufbau einer CSS-Regel h2 { color : navy ; } EIGENSCHAFT WERT SELEKTOR DEKLARATIONSBLOCK

Eine CSS-Regel besteht aus Selektor, geschweiften Klammern und Deklarationen aus Eigenschaft und Wert.

Selektoren: Elemente gezielt auswählen

Selektoren definieren, welche Elemente eine Regel betrifft. Die wichtigsten Arten:

  • Typselektoren: zielen auf alle Elemente eines Typs (p für alle Absätze).
  • Klassenselektoren: zielen auf Elemente mit einer Klasse (.highlight). Ein Element kann mehrere Klassen haben.
  • ID-Selektoren: zielen auf ein einziges Element mit eindeutiger ID (#navigation).
  • Attributselektoren: zielen auf Attribute (input[type="submit"]).
  • Pseudoklassen: wählen nach Zustand oder Position, z. B. :hover, :focus oder :nth-child().
  • Pseudoelemente: stylen Teile eines Elements, etwa ::before, ::after oder ::first-letter.
  • Kombinatoren: definieren Beziehungen, z. B. Nachfahren (div p) oder Kind (ul > li).

Kaskade, Spezifität und Vererbung

Drei Konzepte entscheiden, welche Regel gilt, wenn mehrere zutreffen:

  • Kaskade: die Reihenfolge, in der Stylesheets und Regeln zusammengeführt werden (Autoren-, Benutzer- und Browser-Stylesheets).
  • Spezifität: bestimmt den Vorrang. Komplexere Selektoren wie ID-Selektoren haben eine höhere Spezifität als einfache Typselektoren.
  • Vererbung: bestimmte Eigenschaften wie color oder font-family werden vom Eltern- an das Kindelement weitergegeben, sofern dort keine spezifischere Regel greift.

CSS in die Webseite einbinden

Es gibt drei Wege, CSS zu integrieren:

Externes Stylesheet (empfohlen): Die Regeln liegen in einer separaten .css-Datei, die im <head> verlinkt wird. Vorteile: zentrale Wartung, Browser-Caching, saubere Trennung.

Internes Stylesheet: Die Regeln stehen direkt im <head> innerhalb von <style>-Tags. Nützlich für Stile, die nur eine einzelne Seite betreffen.

Inline-Style: Die Regeln werden per style-Attribut einem einzelnen Element zugewiesen. Sie haben die höchste Spezifität, erschweren aber die Wartung und sollten sparsam eingesetzt werden.

Fortgeschrittene Konzepte

CSS hat sich enorm weiterentwickelt. Statt monolithischer Versionen wie „CSS3" gilt es heute als lebendiger Standard aus einzelnen Modulen (z. B. CSS Color Module Level 5), die unabhängig entwickelt werden. Wichtige Techniken:

  • Box Model: beschreibt Elemente als Boxen aus Inhalt, Padding, Border und Margin.
  • Flexbox: eindimensionales Layout zum Anordnen von Elementen in Reihe oder Spalte.
  • Grid Layout: zweidimensionales System für komplexe Rasterstrukturen.
  • Media Queries: Grundlage für responsives Design – Regeln greifen abhängig von Bildschirmbreite, Auflösung oder Orientierung.
  • CSS-Variablen (Custom Properties): wiederverwendbare Werte für Farben oder Größen.
  • Transitions und Animationen: sanfte Übergänge und keyframe-basierte Bewegungen.

Werkzeuge und SEO-Bezug

Für die Arbeit mit CSS helfen die Browser-Entwicklertools: Mit dem Inspektor analysierst du HTML und CSS live und testest Änderungen. Der W3C CSS Validation Service prüft deinen Code auf Gültigkeit, und Editoren wie VS Code bieten Syntaxhervorhebung und Autovervollständigung.

CSS wird zwar nicht direkt von Suchmaschinen ausgewertet, doch eine saubere, gut strukturierte Codebasis wirkt indirekt positiv auf SEO – etwa über schnellere Ladezeiten. Wie du diese optimierst, zeigt der Artikel zur PageSpeed-Optimierung.

Fazit

CSS ist weit mehr als „Websites hübsch machen". Es prägt maßgeblich, wie wir das Web erleben. Die Trennung von Inhalt und Präsentation, die Flexibilität für verschiedene Geräte und die kontinuierliche Weiterentwicklung machen CSS zu einem unverzichtbaren Bestandteil moderner Webentwicklung. Ein gutes Verständnis der Grundlagen – Regelaufbau, Selektoren, Kaskade und Einbindung – ist die Basis für ansprechende, benutzerfreundliche und wartbare Seiten. Interaktivität ergänzt du anschließend mit JavaScript.

FAQ

Häufige Fragen

HTML kümmert sich um Struktur und Bedeutung der Inhalte, CSS ausschließlich um das Aussehen. Diese Trennung macht Websites wartbarer, flexibler und barrierefreier, weil Design-Änderungen zentral im Stylesheet erfolgen.

Das externe Stylesheet. Es erlaubt zentrale Wartung, wird vom Browser zwischengespeichert und trennt Inhalt sauber vom Design. Interne Stylesheets und Inline-Styles sind Sonderfälle für einzelne Seiten oder Elemente.

Flexbox ist ein eindimensionales Layout-Modell für die Anordnung von Elementen in einer Reihe oder Spalte. Grid ist zweidimensional und eignet sich für komplexe Rasterstrukturen mit Spalten und Zeilen.

Nicht direkt – Suchmaschinen bewerten CSS nicht als Rankingfaktor. Indirekt hilft eine saubere Codebasis aber, etwa durch schnellere Ladezeiten und bessere Barrierefreiheit.

Quiz

Teste dein Wissen

Fünf Fragen zu den CSS-Grundlagen.

Question 1 of 5

Was ist die Kernidee hinter CSS?