CSS einfach erklärt: dieselbe Seite auf jedem Gerät

Sie haben Ihre neue Website abgenommen — auf dem großen Bildschirm im Büro, wo alles sitzt. Zwei Wochen später schickt Ihnen ein Kunde ein Bildschirmfoto vom Handy: Die Schrift ist winzig, ein Bild ragt über den Rand hinaus, und der Preis steht auf einer hellgrauen Fläche, die man kaum lesen kann.

Zuständig für all das ist eine einzige Zutat Ihrer Website: CSS. Hier wird CSS einfach erklärt — nicht als Anleitung zum Programmieren, sondern als das, was es für Sie ist: die Entscheidung darüber, ob Ihre Seite auf jedem Gerät funktioniert oder nur auf dem, auf dem sie abgenommen wurde.

Die Abkürzung steht für „Cascading Style Sheets“, frei übersetzt: gestufte Gestaltungsvorlagen. Der Name ist sperrig, die Idee dahinter ist einfach. Es sind Regeln, die beschreiben, wie ein Inhalt aussehen soll — getrennt von dem Inhalt selbst.

CSS einfach erklärt: Inhalt und Aussehen sind getrennt

In einem Word-Dokument klebt die Formatierung am Text. Wenn Sie alle Überschriften von blau auf grün ändern wollen, klicken Sie jede einzeln an. Bei einer Website ist das anders — jedenfalls dann, wenn sie ordentlich gebaut ist.

Dort steht die Bedeutung eines Inhalts im HTML, dem strukturellen Fundament der Seite: Das hier ist eine Überschrift, das ein Absatz, das ein Knopf. Und an einer einzigen, zentralen Stelle steht die Regel: Überschriften sehen so aus, Knöpfe so. Sie ändern die Regel einmal — und sie greift auf jeder Seite, in jedem Abschnitt, für alle künftigen Inhalte.

Das ist der Grund, warum eine saubere Website im Unterhalt günstiger ist. Eine neue Hausfarbe nach einem Markenwechsel ist dann eine Änderung von Minuten und nicht die Durchsicht von vierzig Unterseiten. Genauso verhält es sich mit Abständen, Schriften und der Gestaltung von Formularen.

Der Umkehrschluss ist ebenso wichtig: Wenn Ihre Agentur für eine simple Farbänderung mehrere Stunden ansetzt, ist das ein Hinweis darauf, dass die Gestaltung nicht zentral gepflegt wird, sondern seitenweise zusammengeklebt wurde.

Wie eine Seite sich an Bildschirmgrößen anpasst

Es gibt nicht den einen Bildschirm. Es gibt Handys im Hoch- und Querformat, Tablets, Laptops mit kleinen Displays und Monitore, die dreimal so breit sind. Dazu kommen Besucher, die die Schrift in ihren Systemeinstellungen vergrößert haben, weil sie sonst nichts erkennen.

Eine gut gebaute Seite ist deshalb nicht auf eine feste Breite gezeichnet. Sie besteht aus Bereichen, die sich dehnen, umbrechen und untereinanderrutschen dürfen. Drei Kacheln nebeneinander werden auf dem Handy zu drei Kacheln untereinander — nicht zu drei winzigen Kacheln, die man mit den Fingern auseinanderziehen muss.

Die Regeln dafür stehen im CSS. Sie legen fest, ab welcher Breite sich das Layout umbaut und was dabei mit den Bildern passiert. Wichtig ist die Reihenfolge, in der man das entwirft: Wer zuerst die Fassung für den großen Bildschirm zeichnet und sie danach zusammenstaucht, bekommt ein anderes — meist schlechteres — Ergebnis als jemand, der den Entwurf beim Handy beginnen lässt.

Warum Schriftgröße und Kontrast keine Geschmacksfrage sind

Hellgraue Schrift auf weißem Grund sieht auf einem hochwertigen Monitor in einem abgedunkelten Büro elegant aus. Auf einem drei Jahre alten Handy in der Mittagssonne ist sie verschwunden. Dasselbe gilt für dünne Schriftschnitte und für Text, der über ein unruhiges Foto gelegt wird.

Kontrast ist deshalb ein messbarer Wert, kein Gefühl. Es gibt anerkannte Mindestverhältnisse zwischen Schriftfarbe und Hintergrund, und man kann jede Kombination dagegen prüfen. Das ist keine Schikane für Gestalter, sondern der Unterschied zwischen einer Preisliste, die gelesen wird, und einer, die überblättert wird.

Seit dem 28. Juni 2025 gilt in Deutschland zudem das Barrierefreiheitsstärkungsgesetz. Lesbarkeit ist für viele Unternehmen damit nicht mehr nur eine Frage der Höflichkeit gegenüber älteren Kunden, sondern eine Anforderung, die man belegen können muss.

Praktisch heißt das: ausreichend große Grundschrift, ruhige Zeilenlängen, deutliche Abstände zwischen Absätzen und Farbkombinationen, die auch bei Sonnenlicht tragen. Eine Seite darf zurückhaltend gestaltet sein. Sie darf nicht anstrengend zu lesen sein.

Was passiert, wenn Gestaltung nur „irgendwie hübsch“ gemacht wird

Der Schaden entsteht selten dort, wo man ihn erwartet. Er zeigt sich in kleinen Momenten, die den Besucher ärgern, ohne dass er sagen könnte, warum. Diese Muster begegnen uns in fast jeder Bestandsaufnahme einer älteren Website:

• Springende Inhalte beim Laden. Der Besucher will auf „Angebot anfordern“ tippen, in dem Moment lädt oben ein Bild nach, alles rutscht nach unten — und er landet auf einem anderen Knopf. Google misst genau dieses Springen und rechnet es gegen die Seite.
• Unlesbare Texte auf dem Handy. Ein Textblock, der auf dem Monitor als schmale Spalte gedacht war, wird auf dem Handy zur endlosen Wurst aus Zwei-Wort-Zeilen.
• Waagerechtes Schieben. Ein einziges zu breites Element — eine Tabelle, ein Bild — und die ganze Seite lässt sich seitlich verschieben. Der Besucher verliert den Rand und weiß nicht mehr, wo er ist.
• Knöpfe, die keine sind. Etwas ist blau und unterstrichen, aber nicht anklickbar. Oder umgekehrt: Etwas ist anklickbar, sieht aber aus wie normaler Text.
• Verschwindende Beschriftungen. In Eingabefeldern steht die Beschriftung nur als blasser Platzhaltertext — sobald man tippt, ist sie weg, und niemand weiß mehr, was in das Feld gehört.

Der erste Punkt ist der teuerste. Das Springen von Inhalten während des Ladens hat einen eigenen Messwert, den Google erhebt, und ein Wert bis 0,1 gilt dabei als gut. Was hinter dieser und den beiden anderen Zahlen steckt, haben wir in den Core Web Vitals verständlich aufgeschrieben.

CSS einfach erklärt: was gute Gestaltung im Alltag bringt

Sie werden die Gestaltungsregeln Ihrer Website nie zu Gesicht bekommen. Sie merken aber sehr wohl, ob sie ordentlich gemacht sind — an vier Dingen:

• Änderungen an Farben, Schriften oder Abständen sind kleine Aufträge, keine Projekte.
• Eine neue Unterseite sieht automatisch aus wie die anderen, ohne dass jemand nachgestalten muss.
• Die Seite bleibt beim Vergrößern im Browser benutzbar, statt zu zerfallen.
• Auf einem fremden Handy sieht die Seite genauso durchdacht aus wie auf Ihrem Bildschirm.

Diese vier Punkte gehören in die Abnahme. Prüfen Sie sie, bevor Sie die Schlussrechnung freigeben — nicht ein halbes Jahr später, wenn der Kunde das Bildschirmfoto schickt. Wenn Sie eine Website erstellen lassen, ist die Abnahme auf einem fremden Gerät der wertvollste Termin des ganzen Projekts.

Häufige Fragen

Kann man das Aussehen einer Website ändern, ohne die Inhalte anzufassen?

Ja, und genau das ist der Sinn der Trennung. Solange die Struktur der Seiten stimmt, lässt sich die Gestaltung austauschen wie ein Anstrich. In der Praxis gelingt das umso besser, je sauberer die Inhalte ausgezeichnet sind — bei Seiten, deren Struktur aus bedeutungslosen Kästen besteht, hängt das Aussehen an tausend Einzelstellen und ein neuer Anstrich wird zum Neubau.

Verlangsamt aufwendige Gestaltung meine Seite?

Gestaltungsregeln selbst sind sehr klein und schnell. Kritisch wird es, wenn große Bilder, Videohintergründe oder Schriftarten nachgeladen werden, die von fremden Servern kommen. Der weitaus häufigere Bremsklotz sind allerdings nicht die Gestaltungsregeln, sondern die Skripte, die eine Seite ausbremsen.

Warum sieht meine Seite in verschiedenen Browsern leicht unterschiedlich aus?

Weil Browser Standardeinstellungen mitbringen und Geräte unterschiedliche Bildschirme haben. Kleine Abweichungen sind normal und kein Mangel. Ein Mangel ist es erst, wenn Inhalte sich überlagern, abgeschnitten werden oder nicht bedienbar sind. Genau darauf sollte eine Abnahme prüfen — auf einem Android-Handy, einem iPhone und einem Rechner.

Reicht es, wenn die Seite auf meinem eigenen Handy gut aussieht?

Nein. Ihr Handy ist wahrscheinlich neuer als der Durchschnitt, Sie kennen die Seite auswendig und Sie sitzen im WLAN. Prüfen Sie zusätzlich auf einem älteren Gerät, mit vergrößerter Systemschrift und unterwegs im Mobilfunknetz. Was dort noch gut funktioniert, funktioniert überall.

Was Sie jetzt tun können

Nehmen Sie Ihr Handy, stellen Sie in den Systemeinstellungen die Schriftgröße zwei Stufen höher und gehen Sie damit Ihre wichtigsten drei Seiten durch. Danach dasselbe im Freien bei Tageslicht. Alles, was Sie dabei nicht mehr lesen oder nicht mehr treffen können, ist eine Aufgabe für Ihre Agentur — und keine Geschmacksdiskussion.

Wir entwerfen jede Seite so, dass sie diesen Test besteht, bevor über Feinheiten gesprochen wird. Eine schöne Seite, die man nicht lesen kann, ist keine schöne Seite. Ein sauber gebauter kleiner Auftritt ist mehr wert als ein großer, der auf dem Handy auseinanderfällt.