Webentwicklung

CSS

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit der das Aussehen von Webseiten gestaltet wird. Sie legt fest, wie der in HTML strukturierte Inhalt dargestellt wird: Farben, Schriften, Abstände, Layout und responsives Verhalten. CSS trennt die Gestaltung vom Inhalt und ist neben HTML und JavaScript eine der drei Kerntechnologien des Webs.

Was ist CSS?

CSS (Cascading Style Sheets) ist die Sprache, mit der du das Aussehen einer Webseite gestaltest. Während HTML die Struktur und Inhalte liefert, legt CSS fest, wie diese Inhalte aussehen: Farben, Schriftarten, Abstände, Rahmen, Hintergründe und das gesamte Layout.

Du trennst damit Inhalt und Gestaltung sauber voneinander. Änderst du eine zentrale CSS-Datei, passt sich das Design auf allen Seiten gleichzeitig an. CSS steuert ausserdem, wie eine Seite auf verschiedenen Bildschirmgrößen reagiert und wie Elemente sich beim Überfahren mit der Maus oder beim Scrollen verhalten. Ohne CSS wäre eine Webseite nur unformatierter, schwarzer Text auf weissem Grund.

Wie funktioniert CSS mit Selektoren, Eigenschaften und der Kaskade?

CSS funktioniert nach dem Prinzip: Du wählst ein Element aus und weist ihm Eigenschaften zu. Ein Selektor bestimmt, welche HTML-Elemente gestaltet werden (etwa alle Überschriften oder eine bestimmte Klasse). In den geschweiften Klammern stehen dann Eigenschaft und Wert, zum Beispiel color: blue oder font-size: 18px.

Das Wort Kaskade beschreibt, wie CSS bei widersprüchlichen Regeln entscheidet. Drei Faktoren zählen:

  • Spezifität: Ein genauerer Selektor (ID) schlägt einen allgemeinen (Element).
  • Reihenfolge: Steht eine Regel weiter unten, gewinnt sie bei gleicher Spezifität.
  • Vererbung: Kind-Elemente übernehmen viele Eigenschaften vom Eltern-Element.

Für dynamische Effekte wie Klick-Reaktionen kommt zusätzlich JavaScript ins Spiel.

Wie sorgt CSS für responsives Design?

CSS macht eine Webseite responsiv, also passt sie automatisch an Smartphone, Tablet und Desktop an. Das wichtigste Werkzeug dafür sind Media Queries: Du definierst, dass bestimmte Regeln nur ab oder bis zu einer bestimmten Bildschirmbreite gelten. So wird aus einem dreispaltigen Layout am Desktop eine übereinander gestapelte Ansicht am Handy.

Moderne Layout-Methoden wie Flexbox und CSS Grid verteilen Inhalte flexibel, ohne dass du jede Größe von Hand festlegst. Relative Einheiten wie Prozent, rem oder vw helfen zusätzlich, Schrift und Abstände mitwachsen zu lassen. Wer eine Website ohne Code aufbaut, etwa mit Webflow, nutzt im Hintergrund dieselben CSS-Mechanismen. Mehr Hintergründe findest du unter Responsive Webdesign.

Häufige Fragen

Was ist der Unterschied zwischen HTML und CSS?
HTML legt die Struktur und den Inhalt einer Seite fest, also Überschriften, Texte, Bilder und Links. CSS bestimmt, wie diese Inhalte aussehen: Farben, Schriften, Abstände und Layout. Vereinfacht gesagt ist HTML das Gerüst und CSS die Gestaltung. Beide arbeiten Hand in Hand.
Brauche ich CSS-Kenntnisse für eine eigene Website?
Nicht zwingend. Baukasten- und No-Code-Tools wie Webflow erzeugen das CSS im Hintergrund, du gestaltest visuell. Für individuelle Designs, schnelle Ladezeiten und volle Kontrolle ist sauberes CSS aber entscheidend. Bei anspruchsvollen Projekten lohnt sich deshalb professionelle Umsetzung.
Was bedeutet die Kaskade in Cascading Style Sheets?
Die Kaskade regelt, welche Stilregel gilt, wenn mehrere sich widersprechen. Entscheidend sind Spezifität des Selektors, die Reihenfolge im Code und die Vererbung von Eltern- auf Kind-Elemente. Eine genauere oder später notierte Regel setzt sich durch. So bleibt das Styling trotz vieler Regeln vorhersehbar.

Verwandte Begriffe

Diesen Begriff in deinem Projekt richtig nutzen?

Ich baue Websites, die gut aussehen und dabei gefunden werden - technisch sauber, schnell und SEO-/KI-optimiert.