Stylesheet
Stellen Sie sich eine Bühne vor. Nackt. Ein grelles Arbeitslicht von oben, der Schauspieler steht in Jeans und T-Shirt zwischen Kabeln und Kisten und spricht seinen Text. Jedes Wort sitzt. Und trotzdem würde niemand dafür eine Eintrittskarte kaufen.
Genau so sieht eine Webseite ohne Stylesheet aus. Schwarze Schrift auf weißem Grund, Links in jenem alten Blau, alles linksbündig übereinandergestapelt wie Umzugskartons im Flur. Der Inhalt ist vollständig da. Sehen will ihn so nur keiner.
Dann kommt das Stylesheet. Und mit ihm Licht, Kostüm, Bühnenbild. Der Text bleibt Wort für Wort derselbe. Die Wirkung ist eine andere Welt.
Ein Stylesheet legt fest, wie HTML-Inhalte aussehen, und steuert Farben, Schriften, Abstände und Layout zentral.
Was ist ein Stylesheet?
Ein Stylesheet ist die Anweisung, wie eine Webseite aussehen soll. Es trennt sauber zwei Dinge, die viele durcheinanderwerfen: das, was gesagt wird, von dem, wie es erscheint.
Das HTML ist der Text des Stücks. Es legt fest: hier eine Überschrift, dort ein Absatz, da ein Bild, dann ein Link. Struktur. Bedeutung. Reihenfolge.
Das Stylesheet ist die Regie. Es bestimmt Farbe, Schriftgröße, Abstände, Anordnung. Ob die Überschrift flüstert oder ruft. Ob der Absatz Luft zum Atmen hat oder eingequetscht zwischen seinen Nachbarn steht.
Geschrieben wird diese Regie fast immer in CSS, Cascading Style Sheets, einer eigenen Sprache nur für das Aussehen. Festgelegt wird CSS vom W3C, dem Gremium, das die Webstandards hütet. Andere Sprachen für visuelle Gestaltung gab es; durchgesetzt hat sich CSS. Es ist die Präsentationsschicht des Webs, während HTML die Inhaltsschicht bleibt.
Diese Trennung ist der ganze Trick. Der Inhalt weiß nicht, wie er aussieht. Das Aussehen weiß nicht, was es bekleidet. Und genau deshalb lässt sich das eine ändern, ohne das andere anzufassen.
Drei Wege, ein Stylesheet anzubringen
Es gibt nicht den einen Ort für ein Stylesheet. Es gibt drei. Und sie unterscheiden sich so stark wie ein Garderobenplan vom Kostüm, das man dem Schauspieler direkt auf die Haut näht.
Externe Stylesheets
Eine eigene Datei mit der Endung .css, die jede Seite per Verweis lädt. Das ist der Plan der Kostümbildnerin, der für das ganze Ensemble gilt. Ändert sie eine Zeile, ziehen sich am Premierenabend hundert Seiten gleichzeitig um.
Das ist der Normalfall, und das aus gutem Grund. Eine Datei, eine Quelle der Wahrheit, eine zentrale Stellschraube für das gesamte Erscheinungsbild.
Interne Stylesheets
Die Anweisungen stehen direkt im <head> einer einzelnen Seite, eingerahmt vom <style>-Tag. Eine Notiz, die backstage für genau diese eine Vorstellung an die Wand gepinnt wird. Praktisch, wenn nur eine einzige Seite ein Sonderaussehen braucht. Sobald es mehr werden, wird die Notiz zur Zettelwirtschaft.
Inline-Stylesheets
Hier wird das Aussehen unmittelbar in das HTML-Element geschrieben, über das style-Attribut. Das ist das Kostüm, das dem Schauspieler auf die Haut genäht wird. Es funktioniert. Aber Sie können es nicht wiederverwenden, nicht zentral ändern, und der Code verklumpt. Wer alles inline schreibt, hat am Ende keinen Garderobenplan mehr, sondern hundert einzeln vernähte Kostüme. Inline gehört in den Werkzeugkasten für Ausnahmen, nicht in den Alltag.
Warum Stylesheets wichtig sind
Wann haben Sie zuletzt eine Webseite besucht und gedacht: Hier hat sich jemand Mühe gegeben? Vermutlich nicht wegen des Textes allein. Sondern wegen allem drumherum, das ihn lesbar, ruhig, einladend gemacht hat.
Das leistet das Stylesheet. Und drei Dinge im Besonderen.
Sauberer Inhalt. Weil das Aussehen ausgelagert ist, bleibt das HTML schlank und auf das konzentriert, was es kann: Struktur und Bedeutung. Der Code wird lesbar. Wartung wird zur Routine statt zur Schnitzeljagd.
Konsistenz und Wiederverwendung. Ein externes Stylesheet gilt für jede verbundene Seite. Die Marke soll plötzlich dunkelgrün statt blau auftreten? Eine Zeile. Tausend Seiten. Fertig. Wer schon einmal eine Farbe per Hand durch hundert Dokumente gejagt hat, kennt den Unterschied zwischen Erleichterung und Feierabend um Mitternacht.
Bessere Ladezeiten. Liegt das Aussehen in einer separaten Datei, lädt der Browser sie einmal und merkt sie sich für alle weiteren Seiten. Das nennt sich Caching. Es spart Datenmenge, und gespartes Laden ist gewonnene Geduld beim Besucher.
Wie ein Stylesheet aufgebaut ist
Ein Stylesheet ist eine Sammlung von Regeln. Und jede Regel ist im Grunde ein simpler Satz mit drei Bestandteilen: Wen meine ich, was an ihm, und wie.
Selektoren, Eigenschaften, Werte
Der Selektor sagt, wen die Regel betrifft. Die Besetzungsanweisung der Regie. Wer trägt was?
- Element-Selektoren (
h1,p) sprechen alle Elemente eines Typs an. Alle Absätze, alle Überschriften. - Klassen-Selektoren (
.button) beginnen mit einem Punkt und lassen sich auf beliebig viele Elemente legen. Ein Kostüm für alle, die diese Rolle spielen. - ID-Selektoren (
#header) beginnen mit einer Raute und gehören genau einem Element. Eine ID darf pro Seite nur ein einziges Mal vergeben werden. Die Hauptrolle gibt es nun mal nur einmal. - Attribut-Selektoren (
a[href]) greifen Elemente nach ihren Eigenschaften, etwa alle Links mit einem Ziel.
Die Eigenschaft sagt, was verändert wird: color, font-size, margin, border. Der Wert sagt, wie: blue, 16px, 1.5.
So sieht das zusammen aus:
p {
color: black;
font-size: 14px;
line-height: 1.5;
}
Übersetzt: Alle Absätze tragen schwarze Schrift, vierzehn Pixel groß, mit anderthalbfachem Zeilenabstand. Drei Anweisungen. Ein ruhiges, lesbares Schriftbild auf der ganzen Seite.
Die Kaskade
Bleibt die Frage, die im Namen steckt. Das C in CSS steht für Cascading, also kaskadierend. Was heißt das?
Stellen Sie sich vor, zwei Anweisungen widersprechen sich. Die eine sagt: Dieser Absatz wird blau. Die andere sagt: Er wird rot. Auf der Bühne stünden zwei Regisseure und riefen Gegensätzliches. Irgendwer muss entscheiden.
Genau das tut die Kaskade. Sie ist das Regelwerk, das festlegt, welche Anweisung gewinnt, wenn mehrere greifen. Drei Dinge zählen dabei: woher die Regel kommt, wie genau ihr Selektor zielt, und wer zuletzt gesprochen hat. Eine ID schlägt eine Klasse, eine Klasse schlägt ein Element, und bei Gleichstand gewinnt die spätere Zeile.
Klingt nach Bürokratie. Ist aber die stille Ordnung, die verhindert, dass aus tausend Stimmen ein Geschrei wird. Wer die Kaskade versteht, hört auf, gegen das eigene Stylesheet zu kämpfen.
Best Practices
Ein gutes Stylesheet erkennt man nicht daran, dass es funktioniert. Sondern daran, dass ein Kollege es ein Jahr später noch versteht.
Kommentare setzen. Ein kurzer Hinweis, warum eine Regel existiert, erspart dem Nächsten das Rätselraten. Auch wenn der Nächste man selbst ist.
Code minimieren. Für den Auslieferungsbetrieb wird CSS komprimiert: Leerzeichen raus, Umbrüche raus, Datei klein. Kleinere Datei, schnellere Auslieferung.
Inline meiden. Aussehen gehört ins Stylesheet, nicht verstreut in tausend Elemente. Alles andere rächt sich bei der ersten Änderung.
Relative Einheiten nutzen. em, rem, Prozentwerte statt starrer Pixel. So passt sich das Schriftbild dem Gerät und den Vorlieben des Lesers an, statt ihn in eine feste Größe zu zwingen.
Modern denken. Media Queries lassen die Seite je nach Bildschirmbreite anders auftreten. CSS-Variablen halten zentrale Werte wie Markenfarben an einer Stelle fest. Wer beides beherrscht, wechselt das Kostüm nicht nur einmal, sondern passt es jedem Saal an.
Stylesheets und SEO
Suchmaschinen lesen keine Bühne. Sie lesen den Quelltext. Und trotzdem wirkt das Stylesheet bis ins Ranking hinein, nur eben über Umwege.
Tempo. Ladegeschwindigkeit ist ein Rankingfaktor. Google misst sie unter anderem über die Core Web Vitals. Ein schlankes, gecachtes Stylesheet hilft hier mehr als jede Beteuerung, man sei schnell.
Mobil zuerst. Google bewertet vorrangig die mobile Fassung einer Seite. Ein responsives Design, gebaut mit flexiblen Stylesheets und Media Queries, ist damit keine Kür mehr. Es ist Pflicht.
Aufgeräumter Code. Ein klar getrenntes Stylesheet hält das HTML schlank, und schlankes HTML liest sich für Crawler leichter. Ehrlich bleibt dabei: Eine schöne Seite rankt nicht, weil sie schön ist. Sie rankt, weil die Sauberkeit dahinter Tempo, Stabilität und Bedienbarkeit erzeugt, und das sind die Dinge, die zählen.
Herausforderungen
Wo Macht ist, ist auch Unordnung möglich. Drei Stolpersteine begegnen jedem, der länger mit Stylesheets arbeitet.
Wildwuchs bei großen Projekten. Je mehr Hände an einem Stylesheet schreiben, desto eher entstehen doppelte, widersprüchliche Regeln. Ohne klare Linie wird aus dem Garderobenplan ein Kostümfundus, in dem niemand mehr findet, was er sucht.
Browser-Eigenheiten. Nicht jeder Browser deutet CSS exakt gleich. Was im einen Saal stimmt, sitzt im anderen schief. Was wo funktioniert, lässt sich auf Can I use nachschlagen, bevor man sich auf etwas verlässt.
Technische Schulden. Ungepflegte Stylesheets wuchern. Jede schnelle Lösung von heute wird zur Last von morgen. Irgendwann traut sich keiner mehr, eine Zeile zu löschen, aus Angst, dass anderswo etwas zerbricht.
Was wäre Ihre Webseite, wenn man ihr das Stylesheet wegnähme? Derselbe Text. Dieselbe Substanz. Und doch jenes nackte Bühnenlicht, vor dem niemand sitzen bleibt. Das Stylesheet macht keinen Inhalt. Es entscheidet nur darüber, ob man ihm zuhört.
