Der SISTRIX SEO-Newsletter: Jetzt anmelden!

Was ist CSS – Was sind Cascading-Style-Sheets?

CSS bietet im Webdesign die Möglichkeit, bestimmte stilistische Bausteine, die in den HTML-Dokumenten genutzt werden, zentral in einer Datei zu speichern und für alle HTML-Dokumente zu nutzen.


Was ist CSS?

CSS steht für Cascading-Style-Sheets, was sich im Deutschen mit Kaskadierende-Gestaltungs-Blätter übersetzen ließe, und stellt eine Möglichkeit für HTML-Dokumente dar, den Inhalt einer Seite von den Designanweisungen der einzelnen Elemente, wie zum Beispiel Überschriften, Zitaten, etc, zu entkoppeln.

Ich kann eine CSS-Datei für meine Domain erstellen und diese auf allen Unterseiten, als externe Ressource, einbinden. Dies kann mir viel Zeit sparen, wenn ich feste Vorgaben für meine Designelemente habe die sich zwischen Dokumenten nicht ändern.

Der kaskadierende Teil wird dann klar, wenn man sich mit verschiedenen Klassen beschäftigt. Ich kann in der CSS-Datei zB festlegen, dass alle H2-Überschriften (Eltern-Element) in Schriftgröße 46 ausgespielt werden und dann eine Unterklasse der H2-Überschriften einfügen (Kind-Element) die den Text fett druckt, wenn eine bestimmte Klasse (zB. „fett“) definiert wird.

Im Dokument, muss ich bei der Unterklasse nicht noch einmal die Anweisung zur Schriftgröße wiederholen, da diese von der übergeordneten Anweisung vererbt wird (überschwappt).

Mit dieser Anweisung bekommt jedes <h2>-Element die Schriftgröße 42 und nur Überschriften mit <h2 class="fett"> werden auch Fett gedruckt.

Warum gibt es Cascading-Style-Sheets?

Die Möglichkeit das Design von dem Inhalt eines Dokuments zu entkoppeln bringt merkbare Geschwindigkeitsvorteile. Zum einen werden die einzelnen HTML-Dokumente kürzer, da die Design-Anweisungen ausgelagert sind.

Zum anderen muss der Webseitenbetreiber nicht bei jedem Dokument darauf achten, dass alle notwendigen Design-Anweisungen vorhanden sind. Dies kann den Verwaltungsaufwand, besonders bei sehr vielen Dokumenten, immens verringern.

Wie kann ich CSS Informationen an ein Dokument übergeben?

Es gibt verschiedene Möglichkeiten CSS in einem HTML Dokument einzubetten. Die beiden häufigsten sind das verlinken einer externen CSS-Datei sowie das direkte Einbetten innerhalb eines HTML Dokuments.

Externe CSS-Datei

Am einfachsten ist es meistens, alle Style-Informationen in einer CSS-Datei zusammenzufassen und diese im <head>-Teil des HTML-Dokuments zu referenzieren:

<link href="https://www.meine-domain.de/assets/css/mein-stylesheet.css" rel="Stylesheet" type="text/css" />

Hiermit sage ich dem Browser, dass die Datei „mein-stylesheet.css“ geladen werden muss um den Inhalt des HTML-Dokuments korrekt anzeigen zu können.

inline CSS

Ich kann mich auch dafür entscheiden, einen Teil meines Style-Sheets direkt, innerhalb des <head>-Bereichs des HTML-Dokuments hinzuzufügen.

Dafür nutze ich einen <style>-Tag. Wenn ich zB eine Klasse erstellen möchte, die sicher stellt, dass meine Bilder auf mobilen Endgeräten responsive ausgeliefert werden, kann ich folgendes direkt in den <head> des Dokumentes schreiben:

<style>

.img-responsive {
     display:block;
     max-width:100%;
     height:auto;
}

</style>

Der Browser wüsste jetzt, dass alle Elemente, bei denen ein class="img-responsive" gesetzt ist, die obigen Style-Answeisungen nutzen sollen.

Nutzung von CSS für die Suchmaschinenoptimierung

Durch die Möglichkeit, Style-Angaben einmalig zu definieren und auf allen Unterseiten umzusetzen, bringt natürlich auch Vorteile für die Suchmaschinenoptimierung.

Durch entsprechende Anweisungen in einer CSS-Datei kann ich zB. genau festlegen wie mein Dokument von einem Desktop und/oder einem mobilen Browser angezeigt wird. Ich kann also einmal ein Responsives-Design erstellen und alle Unterseiten können davon profitieren, dass ich keine zwei Versionen für Desktop und Mobile benötige.

Zudem wurde CSS über die Jahre hinweg genutzt um die Ladegeschwindigkeit bei vielen Webseiten zu erhöhen. Dies wurde dann nötig, wenn viele Dateien zur korrekten Darstellung der Webseite benötigt wurden.

Eine Fülle von Anfragen hat im älteren HTTP-Standard, HTTP/1.1, dazu geführt, dass die Ladezeit alleine aus dem Grund verlängert wurde, da der Browser nur eine maximale Anzahl von Verbindungen erstellen durfte.

Mit dem neuen Standard, HTTP/2, fällt diese Begrenzung weg.

CSS und HTTP/1.1

Bei HTTP/1.1 lassen die meisten Browser, vereinfacht gesagt, nur 6 gleichzeitige Verbindungen pro Host zu. Zudem werden die Verbindungen nach der Übertragung der Ressource terminiert. Hierdurch können alleine durch die Latenz, erhöhte Ladezeiten aufkommen.

Man kann zudem Grafikelemente, die auf der Webseite genutzt werden, als ein großes Image-Sprite laden und dann über CSS nur die Teile des Bildes anzeigen, welche die benötigte Grafik beinhalten.

CSS und HTTP/2

Mit dem neuen HTTP-Standard 2.0 wird die Begrenzung der maximalen Verbindungen gelockert und auch können die Verbindungen für mehr als eine Ressource genutzt werden. Hierdurch spielt die Latenz des Verbindungsaufbaus eine weitaus geringere Rolle in der Seitengeschwindigkeit.

Fazit zu den Cascading-Style-Sheets

CSS ist nicht aus dem Webdesign wegzudenken und es macht durchaus Sinn, sich als SEO mit den Möglichkeiten auseinander zu setzen, die Cascading-Style-Sheets bieten.

Besonders wenn es um die PageSpeed-Optimierung geht, kann auch heute noch die Zeit zum First-Contentful-Paint durch die Nutzung von inline CSS verkürzt werden.

Ähnliche Beiträge