Was ist CSS?

CSS (Cascading Style Sheets) ist die Sprache, mit der das Aussehen einer Website festgelegt wird: Farben, Schriften, Abstände, Layout und Animationen. HTML bestimmt, welche Inhalte eine Seite hat, CSS bestimmt, wie sie dargestellt werden. Weil Gestaltung und Inhalt getrennt sind, lässt sich das Design einer ganzen Website an einer Stelle ändern.

Einfach erklärt: HTML ist der Rohbau, CSS der Innenausbau. Dieser Artikel zeigt, wie CSS aufgebaut ist, warum es für mobile Nutzer, Ladezeit und Barrierefreiheit wichtig ist und welche Fehler die Pflege einer Website teuer machen.

Was CSS bedeutet

Der Name beschreibt das Prinzip:

• Cascading – kaskadierend: Mehrere Regeln können für dasselbe Element gelten, und es gibt klare Vorrangregeln, welche sich durchsetzt.
• Style – Gestaltung: Farbe, Schrift, Größe, Position.
• Sheets – Blätter: Die Regeln stehen meist in eigenen Dateien, den Stylesheets.

CSS wird vom W3C standardisiert und von allen gängigen Browsern verstanden. Die Sprache entwickelt sich laufend weiter. Funktionen wie Variablen, verschachtelte Regeln, Container Queries oder der Selektor :has() sind heute in allen aktuellen Browsern verfügbar und machen früher nötige Hilfsmittel oft überflüssig.

So funktioniert CSS

Eine CSS-Regel besteht aus einem Selektor und einer oder mehreren Anweisungen:

h1 { color: #1a1a1a; font-size: 2rem; }

• Selektor (h1): Welche Elemente sind gemeint? Möglich sind Elementnamen, Klassen wie .button, IDs oder Zustände wie :hover.
• Eigenschaft (color, font-size): Was soll sich ändern?
• Wert (#1a1a1a, 2rem): Wie soll es aussehen?

Eingebunden wird CSS auf drei Wegen: als externe Datei, die per <link> geladen wird (der Normalfall), als Block im Kopf der Seite oder direkt am Element. Für das Layout nutzen Entwickler vor allem Flexbox für Reihen und Spalten und Grid für zweidimensionale Raster.

Neben reinem CSS gibt es Werkzeuge, die das Schreiben erleichtern: Präprozessoren wie Sass oder Utility-Frameworks wie Tailwind CSS. Am Ende erzeugen sie alle normales CSS, das der Browser liest.

Die Kaskade: wer gewinnt bei Widersprüchen?

Sagt eine Regel „Überschriften blau“ und eine andere „Überschriften im Footer weiß“, entscheidet der Browser nach drei Kriterien:

1. Herkunft und Wichtigkeit: Regeln mit !important schlagen normale Regeln.
2. Spezifität: Genauere Selektoren gewinnen. Eine ID wiegt mehr als eine Klasse, eine Klasse mehr als ein Elementname.
3. Reihenfolge: Bei Gleichstand gilt die zuletzt geschriebene Regel.

Das klingt harmlos, ist aber die häufigste Ursache für „ich habe die Farbe geändert, aber nichts passiert“. Mit Cascade Layers lässt sich die Reihenfolge heute bewusst steuern, etwa Basisstile, Komponenten und Ausnahmen in getrennten Ebenen.

CSS und Responsive Design

Ein großer Teil der Besucher kommt heute über das Smartphone. CSS sorgt dafür, dass dieselbe Seite auf Handy, Tablet und großem Bildschirm gut aussieht:

• Media Queries passen das Layout an die Bildschirmbreite an – etwa drei Spalten am Desktop, eine am Handy.
• Container Queries reagieren auf die Breite eines Bereichs statt des ganzen Fensters. Eine Produktkarte sieht so in der Seitenleiste und im Hauptbereich jeweils passend aus.
• Relative Einheiten wie rem, % oder clamp() lassen Schriften und Abstände mitwachsen.

Ein Beispiel: Ein Maschinenbauer zeigt technische Datenblätter als breite Tabelle. Am Desktop passt das, am Smartphone wird die Tabelle unlesbar. Mit wenigen CSS-Regeln lässt sie sich mobil waagerecht scrollen oder als Liste untereinander darstellen – ohne dass die Inhalte doppelt gepflegt werden.

CSS, Ladezeit und Barrierefreiheit

CSS beeinflusst direkt, wie schnell eine Seite sichtbar wird. Der Browser wartet mit der Darstellung, bis das nötige CSS geladen ist. Große, unaufgeräumte Stylesheets verzögern deshalb den ersten Eindruck und verschlechtern die Core Web Vitals. Springende Layouts, etwa weil Bildern keine feste Größe zugewiesen ist, sind ebenfalls oft ein CSS-Thema.

Auch die Barrierefreiheit hängt stark an CSS: ausreichende Kontraste, sichtbare Fokusrahmen für Tastaturnutzer, Schriften, die sich vergrößern lassen, und Rücksicht auf die Einstellung „Bewegung reduzieren“. Seit dem Barrierefreiheitsstärkungsgesetz ist das für viele Onlineshops und digitale Dienstleistungen keine Kür mehr.

Typische Fehler

• Inline-Stile überall. Wer Farben direkt an jedes Element schreibt, muss bei einer Änderung Hunderte Stellen anfassen.
• !important als Dauerlösung. Jede Ausnahme erzwingt die nächste, bis niemand mehr weiß, welche Regel gilt.
• Tote Regeln. Nach Jahren und mehreren Relaunches lädt die Website oft Stile für Seiten, die es nicht mehr gibt.
• Nur am Desktop geprüft. Das Layout wird am großen Monitor abgenommen, Kunden sehen es am Handy.
• Keine festen Farben und Abstände. Ohne definierte Variablen entstehen zwölf Grautöne und acht Abstandsgrößen, und das Design wirkt unruhig.

In der Praxis: ein Design, das gepflegt bleibt

Für Unternehmen zählt weniger die Sprache selbst als das Ergebnis: eine Website, die auf jedem Gerät funktioniert, schnell lädt und sich ohne Umbau erweitern lässt. Beim Website-Abo bauen und pflegen wir Ihre Unternehmenswebsite auf einer aufgeräumten technischen Basis. Für Portale und interne Werkzeuge mit eigener Oberfläche setzen wir bei Web-Anwendungen auf feste Designregeln, damit neue Funktionen zum Bestehenden passen.

Häufige Fragen

Was ist CSS einfach erklärt?

CSS ist die Sprache, die festlegt, wie eine Website aussieht. HTML liefert die Inhalte, CSS gibt ihnen Farben, Schriften, Abstände und Layout.

Ist CSS eine Programmiersprache?

Im engeren Sinn nicht. CSS beschreibt Darstellung, es enthält keine Programmlogik wie Schleifen oder Datenabfragen. Für Interaktionen wie Formularprüfungen kommt JavaScript hinzu.

Hat CSS Einfluss auf SEO?

Indirekt ja. Suchmaschinen bewerten Ladezeit, Stabilität des Layouts und Nutzbarkeit auf dem Smartphone. Schlankes, sauberes CSS verbessert diese Werte, unaufgeräumtes verschlechtert sie.

Was ist der Unterschied zwischen CSS und Tailwind?

Tailwind CSS ist ein Framework, das viele kleine, vordefinierte CSS-Klassen bereitstellt. Man gestaltet damit direkt im HTML. Am Ende erzeugt Tailwind ganz normales CSS, das der Browser liest.