CSS steht für Cascading Style Sheets und ist die Sprache, die bestimmt, wie eine Website aussieht. HTML gibt der Seite ihre Struktur, CSS gestaltet ihr Erscheinungsbild: Farben, Abstände, Schriftarten, Layouts und Animationen. Wer mit Webdesignern oder Webflow-Entwicklern zusammenarbeitet, versteht durch CSS schnell, warum Designentscheidungen so getroffen werden, wie sie es werden.

Was ist CSS? Die Definition

CSS (Cascading Style Sheets, deutsch etwa "gestufte Gestaltungsbögen") ist eine Stylesheet-Sprache, die das visuelle Erscheinungsbild von HTML-Dokumenten steuert. Während HTML die Struktur und den Inhalt einer Seite beschreibt, regelt CSS alle optischen Eigenschaften: Typografie, Farben, Abstände, Positionen und Animationen. CSS ist keine Programmiersprache im klassischen Sinne, sondern eine deklarative Beschreibungssprache.

Man gibt dem Browser an, wie etwas aussehen soll, nicht welche Berechnungsschritte er ausführen soll. Diese Trennung von Inhalt und Design ist ein zentrales Prinzip des modernen Webs: Eine Seite lässt sich visuell vollständig neu gestalten, ohne eine einzige Zeile HTML zu ändern.

So funktioniert CSS

Wie CSS in eine Website eingebunden wird

CSS lässt sich auf drei Wegen in ein HTML-Dokument einbinden: als externe Stylesheet-Datei (eine separate .css-Datei, auf die im HTML verwiesen wird), als internes Stylesheet (ein <style>-Block im <head> des HTML-Dokuments) oder als Inline-Stil (eine style-Angabe direkt im HTML-Tag). Die externe Variante ist der Standard für produktive Websites: Alle Stilregeln liegen zentral, lassen sich einmal laden, im Browser-Cache speichern und für jede Seite wiederverwenden.

Selektoren und Deklarationen

Eine CSS-Regel besteht aus zwei Teilen: dem Selektor und dem Deklarationsblock. Der Selektor benennt das HTML-Element, das gestaltet werden soll. Der Deklarationsblock enthält Eigenschaft-Wert-Paare in geschweiften Klammern, zum Beispiel color: blue; oder font-size: 1rem;. Eine einzige Regel kann Dutzende Eigenschaften enthalten und gilt für jedes Element, das dem Selektor entspricht, auf der gesamten Website.

Die Kaskade und Spezifität

Das "Cascading" im Namen beschreibt eine klare Rangfolge: Treffen mehrere CSS-Regeln auf dasselbe Element zu, gewinnt die Regel mit der höheren Spezifität. Eine ID-Regel wie #navigation überschreibt eine Klassen-Regel wie .nav. Eine direkt im HTML-Tag notierte Inline-Stilangabe überschreibt beide. Diese Hierarchie ist der häufigste Grund dafür, warum ein Stil im Browser "nicht greift", obwohl er korrekt geschrieben ist.

Das Box-Modell

Im Browser ist jedes HTML-Element eine rechteckige Box. Das CSS-Box-Modell beschreibt vier Schichten, die jedes Element umgeben: den eigentlichen Inhalt (content), den Innenabstand (padding), den Rahmen (border) und den Außenabstand (margin). Wer versteht, wie diese vier Schichten zusammenwirken, kann Abstände und Ausrichtungen auf der Seite präzise steuern, statt durch Ausprobieren vorzugehen.

Responsive Design mit Media Queries

Media Queries sind das Werkzeug, mit dem CSS auf verschiedene Bildschirmgrößen reagiert. Eine Media Query schreibt vor: "Wenn der Bildschirm maximal 768 Pixel breit ist, wende diese Regeln an." Das ist die technische Grundlage für responsives Webdesign. Für Projektverantwortliche bedeutet das: Jeder Breakpoint im Design-Konzept entspricht einem separaten Regelblock im CSS. Ein Entwurf für Smartphone, Tablet und Desktop erfordert dreifach geprüfte Stile und dreifach getestete Ausgaben im Browser.

Ist CSS noch aktuell?

Ja. CSS wird 2026 aktiv weiterentwickelt und ist aktueller denn je. Moderne Features wie CSS Grid, Custom Properties und Container Queries haben dafür gesorgt, dass CSS heute Aufgaben übernimmt, die früher JavaScript erforderten. Die hier genannten Kernfeatures unterstützen alle aktuellen Browser. Neuere Module kommen schrittweise hinzu, deshalb lohnt vor dem Einsatz ein Blick auf den Browser-Support, etwa bei MDN oder caniuse.com.

Moderne CSS-Features (Stand 2026)

Einige Techniken haben sich in den vergangenen Jahren als Standard durchgesetzt:

• Flexbox und CSS Grid sind heute der Standard für ein- und zweidimensionale Seitenlayouts. Sie lösen ältere Workarounds mit Floats oder Tabellen vollständig ab.
• Custom Properties (CSS-Variablen) ermöglichen es, Werte wie Markenfarben oder Abstände zentral zu definieren und überall auf der Seite wiederzuverwenden. Eine Änderung an einer Stelle wirkt sich auf alle Vorkommen gleichzeitig aus.
• Container Queries (seit 2023 in allen Mainstream-Browsern verfügbar) erlauben responsive Stile, die nicht an der Fensterbreite, sondern am verfügbaren Platz im Elternelement hängen. Das ermöglicht Komponenten, die sich kontextabhängig anpassen.

CSS in der Praxis: Ein konkretes Beispiel

Um CSS greifbar zu machen, hilft ein vollständiges Mini-Beispiel. Angenommen, man gestaltet einen Call-to-Action-Button. Die CSS-Klasse dafür könnte so aussehen:

.btn-primary {
  background-color: var(--color-brand);
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}
.btn-primary:hover {
  opacity: 0.85;
}

Diese Klasse definiert Hintergrundfarbe, Textfarbe, Innenabstände, abgerundete Ecken, Schriftgewicht und einen sanften Hover-Effekt. Die Angabe var(--color-brand) verweist auf eine zentral definierte CSS-Variable für die Markenfarbe. Ändert sich die Markenfarbe, genügt eine einzige Anpassung dieser Variable.

Dasselbe in Webflow: Im Style Panel wählt man die Klasse "btn-primary" und setzt Farben, Abstände und Hover-Status über visuelle Schieberegler und Farbfelder. Webflow schreibt automatisch denselben CSS-Code wie oben, ohne dass eine Zeile manuell getippt werden muss. Wie weit diese visuelle CSS-Kontrolle in Webflow reicht, zeigen die Top 10 Webflow-Funktionen, die unsere Agentur seit 2017 begleiten.

CSS, HTML und JavaScript: Die Unterschiede auf einen Blick

Die drei Grundsprachen des modernen Webs haben klar definierte Aufgaben, die sich nicht überschneiden:

• HTML beschreibt die Struktur und den Inhalt: Überschriften, Absätze, Bilder, Links, Formulare.
• CSS bestimmt das Aussehen: Farben, Schriftarten, Abstände, Layouts, Animationen.
• JavaScript fügt Verhalten hinzu: Klicks verarbeiten, Formulare validieren, Inhalte dynamisch nachladen.

Diese Trennung hat einen konkreten praktischen Nutzen: Inhalte und Design können unabhängig voneinander gepflegt werden, ohne sich gegenseitig zu beeinflussen. CSS steuert dabei auch alle typografischen Details wie Schriftart, Schriftschnitt, Zeilenabstand und Laufweite. Wer tiefer in die Rolle der Typografie im Webdesign einsteigen möchte, findet in unserem Artikel Typografie in UI/UX Design: Mehr als nur schöne Schrift weiterführende Einblicke.

CSS im B2B-Webprojekt: Was Projektverantwortliche wissen müssen

Für Marketing- und Projektverantwortliche, die nicht selbst programmieren, sind einige CSS-Zusammenhänge besonders praxisrelevant.

Webflow schreibt CSS visuell

Webflow ist kein klassischer Drag-and-drop-Baukasten, sondern ein visueller CSS-Editor, der sauberen, semantischen Code erzeugt. Was im Style Panel eingestellt wird, landet als echtes CSS in der Seite. Kein proprietäres Format, kein Vendor-Lock-in auf Markup-Ebene. Wie sich das für Unternehmen konkret auswirkt, erklärt der Artikel Webflow Website für Unternehmen: Lohnt es sich in 2026?

Klassen-Systeme für wartbaren Code

Professionelle Webflow-Agenturen arbeiten mit strukturierten Klassen-Systemen wie Client-First von Finsweet. Das Prinzip: Jede Klasse hat einen definierten Zweck und einen vorhersehbaren Namen. Das macht den CSS-Code wartbar, auch wenn das Entwicklerteam wechselt, und erleichtert spätere Anpassungen erheblich.

CSS Custom Properties für das Corporate Design

Mit CSS-Variablen wird die Primärfarbe einer Marke an einer einzigen Stelle definiert und dann überall referenziert. Eine Farbänderung bedeutet: eine Zeile CSS bearbeiten, keine hundert manuelle Eingriffe durch die gesamte Seite. Das ist besonders relevant für Unternehmen mit strengen Brand-Guidelines, bei denen Farbwerte, Schriftgrößen und Abstände systemisch konsistent sein müssen.

Ungenutztes CSS und Performance

Jede Zeile CSS, die geladen, aber nie angewendet wird, belastet die Ladezeit und verschlechtert Core Web Vitals. Webflow kann das CSS beim Veröffentlichen minimieren. Nicht mehr genutzte Klassen bleiben aber im Stylesheet, bis du sie im Style Manager per „Clean up“ entfernst. In gewachsenen WordPress-Setups mit Dutzenden Plugins laden oft zig Kilobytes an CSS, die keinem sichtbaren Element mehr zugeordnet sind. Einen direkten Vergleich bietet der Artikel Webflow vs. WordPress 2026: Der ultimative Vergleich.

Häufige CSS-Fehler und wie man sie vermeidet

Klassenwildwuchs

Ohne ein klares Klassen-Konzept entstehen mit der Zeit hunderte von CSS-Klassen, von denen niemand mehr weiß, was sie tun. Jede neue Seite bekommt eigene Klassen, die sich mit bestehenden überschneiden oder gegenseitig aufheben. Das Ergebnis ist ein CSS, das niemand mehr anfassen möchte, ohne dabei etwas anderes zu beschädigen. Ein Klassen-System wie Client-First löst genau dieses Problem durch konsequente Benennung.

Inline-Styles

Inline-Styles sind CSS-Angaben direkt im HTML-Tag, etwa style="color: red;". Sie haben die höchste Spezifität und überschreiben jede Klassen-Regel. Das klingt praktisch, führt aber zu einem inkonsistenten Design, das sich kaum zentral pflegen lässt. Inline-Styles haben in produktivem Code nichts zu suchen und sollten vom Entwicklerteam von Anfang an ausgeschlossen werden.

Fehlende Fokus-Styles

Das Entfernen des Standard-Browser-Fokusrahmens (outline: none) verbessert auf den ersten Blick die Optik, erzeugt aber ein Barrierefreiheitsproblem: Tastaturnutzer und Personen mit Hilfstechnologien können nicht mehr erkennen, welches Element gerade aktiv ist. Das ist ein Zugänglichkeitsfehler, der bei professionellen Webprojekten seit 2025 auch rechtliche Relevanz haben kann.

Zu große CSS-Dateien

Große CSS-Dateien verzögern das erste Rendern der Seite, weil der Browser Stylesheets laden muss, bevor er Inhalte darstellt. Das macht sich besonders auf mobilen Geräten bemerkbar. Regelmäßiges Aufräumen nicht mehr genutzter Regeln, das Vermeiden von Framework-Bloat und CSS-Splitting bei großen Projekten sind wirksame Gegenmaßnahmen. Wer ein Webprojekt neu aufsetzen oder grundlegend optimieren möchte, findet in unserem Artikel zur Webflow Agentur: Warum die richtige Partnerschaft über den digitalen Erfolg entscheidet Orientierung bei der Auswahl des richtigen Partners.