CSS gehört neben HTML und JavaScript zu den grundlegenden Webtechnologien und wird von modernen Browsern verwendet, um Webseiten visuell darzustellen.
- Was ist ein Cascading Style Sheet (CSS)?
- Wie ist eine CSS-Regel aufgebaut?
- Wie funktionieren Kaskadierung, Spezifität und Vererbung?
- Kaskadierung und Spezifität
- Vererbung (Inheritance)
- Welche Bedeutung hat CSS für SEO und UX?
- 1. Rendering durch Google
- 2. Ladezeit und Core Web Vitals
- 3. Layout-Stabilität
- 4. Responsive Design und Mobile-First Indexing
- CSS-Schwachstellen mit SISTRIX erkennen, bevor sie zum Rankingproblem werden
- 3 Möglichkeiten, CSS einzubinden
- 1. Externe CSS-Datei
- 2. Internes CSS (Embedded CSS)
- 3. Inline-CSS
- CSS und Ladezeit: Was ist bei Stylesheets zu beachten?
- Fortgeschrittene Performance-Technik: Critical CSS
- CSS-Probleme erkennen und analysieren
- Häufige Fragen zu CSS und Stylesheets
CSS steht für Cascading Style Sheets. Mit CSS wird festgelegt, wie die Inhalte einer Website dargestellt werden, zum Beispiel welche Farben, Schriftarten, Abstände oder Layouts verwendet werden.
Vereinfacht gesagt: HTML bestimmt, was auf einer Website steht, CSS bestimmt, wie es aussieht. HTML bildet das inhaltliche und semantische Grundgerüst einer Seite, während CSS für deren Gestaltung und Anordnung zuständig ist.
Für Online-Marketing und Suchmaschinenoptimierung (SEO) ist CSS ein wichtiges Element im Hintergrund. Obwohl CSS-Code selbst kein direkter Rankingfaktor ist, kann er das Rendering, die Ladezeit (PageSpeed), die Core Web Vitals, die mobile Darstellung und damit die User Experience (UX) beeinflussen.
Was ist ein Cascading Style Sheet (CSS)?
Ein Stylesheet ist eine Sammlung von Gestaltungsregeln. Darin wird beispielsweise festgelegt, wie Überschriften, Texte, Links, Bilder oder Navigationselemente auf einer Website dargestellt werden.
CSS ist die im Web verwendete Sprache für solche Stylesheets. Ein zentrales Stylesheet kann beispielsweise bestimmen, dass alle Überschriften einer Website dieselbe Schriftart und Farbe erhalten. Dadurch müssen die entsprechenden Designangaben nicht für jede einzelne Unterseite neu definiert werden.
CSS kann unter anderem steuern:
- Farben und Schriftarten
- Schriftgrößen und Abstände
- Position und Größe von Elementen
- Spalten und Seitenlayouts
- Buttons und Navigationselemente
- die Darstellung auf unterschiedlichen Bildschirmgrößen
- Animationen und visuelle Effekte
Wie ist eine CSS-Regel aufgebaut?
Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Der Selektor bestimmt, welche HTML-Elemente angesprochen werden.
Im Deklarationsblock stehen eine oder mehrere Deklarationen aus Eigenschaft und Wert:
h2 {
color: #333333;
}
Die einzelnen Bestandteile haben folgende Funktion:
- Selektor (
h2): Bestimmt, welches HTML-Element gestaltet werden soll. - Eigenschaft (
color): Legt fest, welche Eigenschaft verändert wird, hier die Textfarbe. - Wert (
#333333): Definiert den Wert dieser Eigenschaft, hier ein Dunkelgrau.
Steht im HTML-Dokument beispielsweise:
<h2>Was ist CSS?</h2>
wendet der Browser die CSS-Regel auf diese Überschrift an und stellt den Text dunkelgrau dar.
Wie funktionieren Kaskadierung, Spezifität und Vererbung?
Der Begriff „Cascading“ im Namen Cascading Style Sheets weist darauf hin, dass mehrere Gestaltungsregeln gleichzeitig auf ein Element wirken können. Der Browser muss deshalb bestimmen, welche CSS-Anweisungen letztlich angewendet werden.
Kaskadierung und Spezifität
Treffen mehrere CSS-Deklarationen für dieselbe Eigenschaft auf ein Element zu, entscheidet die Kaskade, welcher Wert angewendet wird. Dabei spielt unter anderem die Spezifität eines Selektors eine wichtige Rolle.
Beispiel:
/* Gilt für alle h2-Überschriften */
h2 {
color: #333333;
}
/* Gilt speziell für h2 mit der Klasse "highlight" */
h2.highlight {
color: #e60000;
}
Ein Element mit
<h2 class="highlight">Wichtige Überschrift</h2>
wird rot dargestellt. Die speziellere Regel für h2.highlight setzt sich in diesem Beispiel für die Textfarbe gegenüber der allgemeinen h2-Regel durch.
Vererbung (Inheritance)
Ein weiteres Prinzip ist die Vererbung. Bestimmte CSS-Eigenschaften werden im HTML-Dokumentenbaum von Eltern-Elementen an untergeordnete Elemente weitergegeben.
Beispiel:
body {
font-family: Arial, sans-serif;
color: #222222;
}
Ein Absatz (<p>) innerhalb des <body> übernimmt in der Regel automatisch die Schriftart und Textfarbe, sofern für ihn keine entsprechenden anderen Werte festgelegt wurden.
Nicht alle Eigenschaften werden vererbt. Typografische Eigenschaften wie color oder font-family werden typischerweise vererbt, während beispielsweise margin, padding oder border nicht automatisch an untergeordnete Elemente weitergegeben werden.
Welche Bedeutung hat CSS für SEO und UX?
CSS beeinflusst nicht nur das Aussehen einer Website. Style Sheets können auch die technische Qualität und einer Website positiv oder negativ beeinflussen.
Für SEOs und Online-Marketer sind vor allem vier Bereiche relevant:
1. Rendering durch Google
Google verarbeitet beim Rendering einer Webseite neben HTML auch Ressourcen wie CSS und JavaScript. Deshalb sollte Google auf die für die Darstellung relevanten CSS-Ressourcen zugreifen können.
Werden wichtige CSS-Dateien beispielsweise über die robots.txt vom Crawling ausgeschlossen, kann dies dazu führen, dass Google die Seite nicht wie vorgesehen rendern kann.
2. Ladezeit und Core Web Vitals
Große CSS-Dateien können den Seitenaufbau verzögern, wenn der Browser sie vor der Darstellung sichtbarer Inhalte laden und verarbeiten muss. Solches render-blockierendes CSS verlängert den kritischen Rendering-Pfad und kann sich unter anderem auf den Largest Contentful Paint (LCP) auswirken.
Für schlechte Core Web Vitals kommen neben CSS auch Bilder, JavaScript, Webfonts, Serverantwortzeiten und dynamisch nachgeladene Inhalte als Ursache infrage.
3. Layout-Stabilität
Fehlende Größenangaben, dynamisch eingefügte Inhalte oder nachträgliche Layoutänderungen können dazu führen, dass sich Elemente während des Ladens verschieben. Solche unerwarteten Layout-Sprünge werden unter anderem über den Cumulative Layout Shift (CLS) erfasst.
Eine sauber aufgebaute CSS- und Layout-Struktur kann helfen, solche Verschiebungen zu vermeiden.
4. Responsive Design und Mobile-First Indexing
CSS ermöglicht über sogenannte Media Queries, das Layout einer Website an unterschiedliche Bildschirmgrößen anzupassen.
So können dieselben Inhalte auf einem Smartphone beispielsweise untereinander dargestellt werden, während auf einem großen Desktop-Bildschirm mehrere Spalten nebeneinander erscheinen.
Google nutzt die mobile Version einer Website für die Indexierung und das Ranking. Responsive Webdesign ist dabei die von Google empfohlene Methode, um Websites für unterschiedliche Endgeräte bereitzustellen.
CSS-Schwachstellen mit SISTRIX erkennen, bevor sie zum Rankingproblem werden
Bei größeren Websites lässt sich kaum jede einzelne URL manuell auf render-blockierendes CSS, fehlerhafte Stylesheet-Einbindungen oder Layout-Probleme prüfen. Genau hier setzen die SISTRIX Onpage Projekte an: Sie crawlen die Website regelmäßig und prüfen dabei unter anderem, ob CSS-Ressourcen erreichbar sind und wie lange ihr Ladevorgang dauert. Auffällige URLs, etwa mit besonders hohen Ladezeiten oder nicht erreichbaren Stylesheets, werden dabei systematisch aufgelistet und lassen sich gezielt weiter untersuchen.
So lässt sich schnell klären, ob langsames Rendering tatsächlich an CSS liegt oder ob andere Ressourcen wie JavaScript oder Bilder die Ursache sind. Gerade nach technischen Änderungen am Template oder Frontend, etwa nach einer Umstellung der Stylesheets, lohnt sich ein regelmäßiger Crawl: So fällt frühzeitig auf, wenn nach einem Release neue Rendering- oder Performance-Probleme auf größeren Teilen der Website auftreten.
SISTRIX hilft dabei, technische CSS- und Rendering-Probleme frühzeitig zu erkennen, bevor sie zur Belastung für Ladezeit, Core Web Vitals oder Rankings werden. Teste die SISTRIX Onpage Projekte während der 14-tägigen kostenlosen Testphase und finde heraus, welche technischen Baustellen aktuell auf deiner Website schlummern.
3 Möglichkeiten, CSS einzubinden
CSS lässt sich auf drei grundlegende Arten in eine Website integrieren.
1. Externe CSS-Datei
Bei dieser Variante befinden sich die Styles in einer separaten Datei, beispielsweise style.css. Diese wird im <head> des HTML-Dokuments eingebunden:
<link rel="stylesheet" href="https://www.meine-domain.de/assets/css/style.css">
Vorteil: Ein externes Stylesheet lässt sich zentral pflegen und für viele Unterseiten verwenden. Zudem kann der Browser die Datei zwischenspeichern (Caching), sodass sie bei weiteren Seitenaufrufen nicht zwingend erneut vollständig übertragen werden muss.
Für umfangreiche Websites ist dies der übliche Standard.
2. Internes CSS (Embedded CSS)
CSS kann auch direkt innerhalb eines HTML-Dokuments in einem <style>-Element definiert werden:
<head>
<style>
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
</style>
</head>
Internes CSS kann beispielsweise sinnvoll sein, wenn bestimmte Styles ausschließlich auf einer einzelnen Seite benötigt werden oder gezielt für Performance-Optimierungen eingebunden werden.
3. Inline-CSS
Beim Inline-CSS werden die Styles direkt über das style-Attribut eines HTML-Elements definiert:
<h2 style="color: red;">Wichtiger Hinweis</h2>
Inline-CSS sollte im normalen Seitenaufbau eher sparsam eingesetzt werden. Bei häufiger Verwendung vergrößert es das HTML, erschwert die zentrale Pflege von Designregeln und kann nicht wie ein externes Stylesheet seitenübergreifend wiederverwendet und als separate Ressource gecacht werden.
CSS und Ladezeit: Was ist bei Stylesheets zu beachten?
Früher wurden CSS-Dateien häufig möglichst stark zusammengefasst, um die Zahl einzelner HTTP-Anfragen zu reduzieren. Mit modernen Übertragungsprotokollen wie HTTP/2 und HTTP/3 können mehrere Ressourcen effizienter über eine Verbindung übertragen werden.
Das bedeutet allerdings nicht, dass die Struktur der Stylesheets für die Performance keine Rolle mehr spielt. Umfang, Komplexität, Caching und tatsächlich benötigter CSS-Code können weiterhin die Ladezeit beeinflussen.
Für SEOs ist daher weniger entscheidend, wie viele einzelne CSS-Dateien eine Website verwendet, sondern ob deren Bereitstellung den Seitenaufbau unnötig verzögert.
Fortgeschrittene Performance-Technik: Critical CSS
CSS kann die Darstellung einer Seite blockieren, solange der Browser die benötigten Styles noch nicht verarbeitet hat. Bei umfangreichen Websites kann deshalb sogenanntes Critical CSS als Performance-Optimierung eingesetzt werden.
Dabei werden die CSS-Regeln, die für den unmittelbar sichtbaren Bereich einer Seite („Above the Fold“) benötigt werden, direkt im HTML bereitgestellt. Weitere Styles können anschließend geladen werden.
Critical CSS ist jedoch keine generelle SEO-Pflicht, sondern eine fortgeschrittene Performance-Technik. Ob sie sinnvoll ist, sollte anhand realer Performance-Messungen entschieden werden. Die technische Umsetzung erfolgt in der Regel durch die Webentwicklung.
CSS-Probleme erkennen und analysieren
Hinweise auf Probleme mit CSS oder dem Layout können beispielsweise sein:
- Sichtbare Inhalte einer Seite erscheinen erst mit deutlicher Verzögerung.
- Elemente springen oder verschieben sich während des Ladens.
- Inhalte überlagern sich auf Smartphones oder sind schwer bedienbar.
- Die mobile Darstellung unterscheidet sich unerwartet von der Desktop-Version.
- Für das Rendering benötigte CSS-Ressourcen können nicht geladen oder gecrawlt werden.
- Performance-Analysen weisen auf render-blockierende oder nicht benötigte CSS-Ressourcen hin.
Solche Auffälligkeiten müssen nicht zwangsläufig durch CSS verursacht werden. Sie sind vielmehr ein Anlass, die technische Ursache genauer zu untersuchen.
Häufige Fragen zu CSS und Stylesheets
Das CSS-Box-Modell beschreibt den Aufbau eines HTML-Elements als rechteckige Box. Sie besteht aus Inhalt (Content), Innenabstand (Padding), Rahmen (Border) und Außenabstand (Margin). Mit box-sizing: border-box lassen sich Padding und Border in die angegebene Breite und Höhe eines Elements einbeziehen.
Klassen (.klasse) können für mehrere HTML-Elemente verwendet werden und eignen sich für wiederverwendbare Gestaltungsregeln. IDs (#id) sollen innerhalb eines HTML-Dokuments eindeutig sein und haben eine höhere CSS-Spezifität als Klassen.
Flexbox eignet sich vor allem für eindimensionale Layouts entlang einer Zeile oder Spalte. CSS Grid ist auf zweidimensionale Layouts mit Zeilen und Spalten ausgelegt. Beide Techniken können innerhalb einer Website miteinander kombiniert werden.
em und rem sind relative CSS-Längeneinheiten. rem orientiert sich an der Schriftgröße des Root-Elements (html), während die Bezugsgröße von em von der jeweiligen CSS-Eigenschaft und dem Element abhängt. Dadurch bietet rem häufig eine einheitlichere Bezugsgröße.
SISTRIX kostenlos testen
- Kostenloser Testaccount für 14 Tage
- Unverbindlich, keine Kündigung notwendig
- Persönliches Onboarding durch Experten
