CSS ist eine Formatierungssprache für maschinenlesbare Sprachen wie HTML, SVG, und XML. Die Abkürzung steht für Cascading Style Sheets, welches als “stufenförmiges Gestaltungsformular” übersetzt werden kann. Die Stylesheet Sprache dient zur Ausgestaltung des Erscheinungsbild von Websites und ist eines der wichtigsten und meistgenutzten Sprachen im Web.
Inhaltsverzeichnis
Entstehungsgeschichte
Erste Anfänge von CSS gab es schon seit circa 1993. Einer der ersten Vorschläge zur zentralen Steuerung der Formatierung von HTML Dokumenten findet sich zum Beispiel in einem Kommentar von Robert Raisch. Der englische Originalkommentar befindet sich hier.
“Es existiert ein Bedürfnis innerhalb des World Wide Webs, Informationen mitsamt dem Inhalt in einem WWW-Dokument spezifizieren zu können. Es ist nicht angebracht, HTML für diese Aufgabe zu nutzen, da eines der ersten Prinzipien des HTMLs die Verschlüsselung von Objekten innerhalb eines Dokuments ist. Nicht, in welcher Art und Weise sie ausgegeben werden.”
CSS1
Im Oktober 1994 veröffentlichte der CERN Mitarbeiter Håkon Wium Lie dann eine frühe Version des CSS und benannte diesen “Cascading HTML Style Sheets” (CHSS). Der Computer Wissenschaftler Bert Bos arbeitete zur gleichen Zeit an einem Browser namens Argo, welcher auf einer eigenen Stylesheet Sprache basierte. Gemeinsam entwickelten die beiden schließlich CSS, welches sich gegen zahlreiche andere Stylesheet-Sprachen hinweg setzte, die zur selben Zeit entwickelt wurden. Das World Wide Web Consortium (W3C) wurde nach Konferenzen zum Web (Chicago 1994 und 1995) auf CSS aufmerksam, sodass Lie und Bos mit Mitgliedern des W3Cs an CSS weiterarbeiten konnten. So wurde CSS1 (CSS Level 1) schließlich im Dezember 1996 publiziert und von W3C empfohlen. Diese frühe Version des CSS befolgen aktuelle Browser beinahe komplett.
CSS2
Im Mai 1998 wurde Level 2 des CSS publiziert. CSS2 baut auf seinem übersichtlichen Vorgänger auf und implementiert viele neue Elemente. Diese Version unterstützt zum Beispiel medienspezifische Stylesheets, wie zum Beispiel für blindenschriftfähige Endgeräte und aurale Ausgabegeräte. CSS2.1 wurde 2011 als Empfehlung des W3Cs veröffentlicht. Der CSS2 Standard wird allerdings bis heute nicht komplett von allen Browsern unterstützt, wobei die meisten CSS2.1 weitgehend richtig darstellen. Seit 2016 wird an einer 2. Revision (CSS2.2) gearbeitet, bei der von Browsern nicht unterstützte Elemente gestrichen werden. Seit 2000 ist CSS3 in Entwicklung, welches modular aufgebaut ist und Entwicklungen aus CSS2 weiter verfeinert.
CSS3
CSS Level 3 ist der neueste Standard für CSS. Für die Suchmaschinenoptimierung wahrscheinlich einer der bedeutsamsten Elemente: Media Queries. Zwar wurde das media Element bereits in CSS2 eingeführt, jedoch befasst sich CSS3 mit der Leistung des Endgeräts, und nicht, um welche Art von Endgerät es sich handelt. Media Queries sind insbesondere bei Responsive Design (aber auch beim Adaptive Design) ein wesentlicher Bestandteil. So kann zum Beispiel in der CSS die maximale Bildschirmbreite angegeben werden, ab der ein Element eine andere Eigenschaft aufweist. Adaptive Design nutzt Media Queries zum Beispiel, wenn bei mobilen Geräten kleinere Bilder geladen werden sollen. Ab einer bestimmten Bildschirmgröße bestimmt das Media Query Element, dass eine andere, kleinere, Bilddatei geladen werden soll. Neben Media Queries wurden noch viele neue Attribute hinzugefügt. Besonders für Textelemente gibt es seit CSS Level 3 noch mehr Gestaltungsmöglichkeiten, wie zum Beispiel Schatten (text-shadow), Überlauf (text-overflow) und Wort Wrapping (word-wrap).
Inhalt und Design
Die Notwendigkeit von CSS basiert auf dem Bedürfnis, Form und Inhalt voneinander zu trennen. Ziel der Nutzung von CSS ist es, dass HTML oder XML Dokumente nur noch den Inhalt enthalten und (idealerweise) auf eine separate CSS-Datei im <head> Bereich verweisen. Damit lässt sich die Gestaltung des Dokuments in der CSS steuern. Dort können dann zum Beispiel Textfarbe, Schriftart und Layout festgelegt werden.
In diesem Beispiel wurde ein einfaches HTML Dokument allein durch CSS umgestaltet:
Durch die Trennung von Inhalt und Form sind gestaltende Elemente innerhalb des HTML Dokuments schon seit HTML4 unerwünscht. Sie gelten als veraltet und unnützlich, da ihre Funktionen innerhalb von CSS Codes abgedeckt werden können. Dadurch entsteht ein wesentlich saubererer Quelltext, der weniger HTML Tags nutzt. Folgende Elemente sollten laut W3C nicht mehr genutzt werden:
- <basefont> Element im <head> Abschnitt des HTML Dokuments: Gibt die Schriftgestaltung innerhalb des Dokuments an. Stattdessen kann die Schrift des gesamten Dokuments in der CSS unter body{} formatiert werden.
- <big>: Vergrößert einen Text innerhalb des Body. Die Schriftgröße sollte allerdings in der CSS spezifiziert werden.
- <center>: Zentriert Text und andere Elemente. In der CSS wird text-align:center genutzt, wobei man die Textausrichtung auch auf links (left), rechts (right) oder im Block (justify) anordnen kann. Andere Elemente wie zum Beispiel <div> können durch Auszeichnungen wie margin: 0 auto horizontal zentriert werden.
- <font>: Mit dem <font> Tag kann ein Text innerhalb des Elements formatiert werden. Stattdessen kann die Gestaltung von Text mit Selektoren oder Inline Styling vorgenommen werden.
Implementierung
Inline-Style
Einzelne HTML Elemente können im Dokument direkt mit dem Attribut style formatiert werden. Der Syntax ist derselbe wie auch bei dem internen und dem externen Stylesheet:
<p style=”font-family:arial;font-size:17px;text-align:center;padding:10px;”>Text</p>
Von einer übermäßigen Nutzung des Inline-Styles ist abzuraten. Zwar ist es im ersten Moment praktischer, ein Element direkt zu bearbeiten, jedoch können Werte aus dem Attribut einem Stylesheet widersprechen. In der Regel wird die Formatierung aus dem Inline-Style angezeigt, jedoch ist dies weder bei jedem Browser so, noch ist es ein sauberer Code. Wenn man in der Zukunft mal die Gestaltung der Webseite oder eines Elements ändern will, ist es einfacher, dies in der CSS Datei zu tun. Besonders, wenn man im Inline Style mit komplexeren Attributen, wie zum Beispiel der Positionierung, arbeitet als die Textformatierung.
Internes Style Sheet
Das Interne Stylesheet befindet sich innerhalb des <head> Bereichs eines HTML Dokuments. Diese Methode bietet sich an, wenn eine individuelle Seite, wie zum Beispiel eine Landeseite, einzigartig gestaltet werden soll. Es wird mit dem <style> Tag eingeleitet und schließt mit dem </style> Tag ab:
<html>
<head>
<title>Title</title>
<meta …>
<style>
body {background-color:#ccc;
font-family:arial}
a{text-decoration:none;
color:#fff;
}</style></head><body>....</body></html>
Externes Style Sheet
Wird Externen Stylesheet genutzt, so befindet sich ein Verweis im HTML oder XML Dokument auf eine separate CSS Datei. Beim HTML Dokument befindet sich dieser im Kopfteil:
<head> <link rel=”stylesheet” type=”text/css” href=”style.css”></head>
Die Formatierung von XML Dokumenten mit CSS wird nicht empfohlen. Zwar ist dies möglich, aber W3C weist bei der Formatierung von XML auf Javascript und XSLT zurück. Möchte man trotzdem lieber CSS nutzen, dann kann dies über folgendes Attribut ausgeführt werden:
<?xml-stylesheet type="text/css" href="style.css"?>
Grundsätzliche Grammatik und Syntax
Die CSS Syntax basiert auf einem Selektor und einem Deskriptor-Block. Der Selektor steht für das HTML Element, welches formatiert werden soll. Im Deskriptor Block befinden sich dann die Gestaltungsanweisungen (rules), welche von Semikolons getrennt werden. Der Deskriptor-Block wird von einschleifenden Klammern eingeführt und abgeschlossen.
Die wichtigsten CSS Selektoren für die SEO
- Typselektor: Der Typselektor bezieht sich auf alle HTML-Elemente eines Typs im ganzen Dokument. So kann man zum Beispiel alle h1 Überschriften formatieren, ohne eine spezielle Klasse oder ID zuweisen zu müssen.
- Klassenselektor: Der Klassenselektor wird in der CSS Datei mit einem Punkt (.) am Anfang des Namens ausgezeichnet. So lassen sich bestimmte HTML Elemente gestalten, ohne dass alle Elemente dieses Typs im Dokument formatiert werden. So kann man zum Beispiel bestimme H1-Überschriften mit einer Klasse auszeichnen. Im HTML Dokument wird das mit folgender Syntax umgesetzt: <h1 class=”h1-Klasse”>Überschrift</h1>. Die Namen von Klassenselektoren dürfen nicht mit einer Ziffer anfangen, da sie sonst nicht ausgelesen werden.
- ID-Selektor: Die Vorgehensweise des ID-Selektors ähnelt dem Klassenselektor. Allerdings wird er im CSS Dokument mit einer Raute (#) vor dem Namen des Selektors. Der Unterschied zwischen ID und Class besteht darin, dass der ID-Selektor nur einmal im Dokument erscheinen darf, während class für eine Gruppe von Elementen genutzt werden kann. Zwar lässt sich der ID-Selektor auch für mehrere Elemente nutzen, jedoch ist dies nicht seine eigentliche Funktion.
- Dynamische Pseudoklassen: Dynamische Pseudoklassen formatieren Elemente auf Grund von getätigten Aktionen. Am bekanntesten sind sie im Bezug auf die Formatierung von Links, wie zum Beispiel a:hover, a:visited und a:active.
- Kombinatoren: Kombinatoren verknüpfen verschiedene Selektoren miteinander. Dabei wird zwischen Kindselektor, Nachfahrenselektor, Nachbarselektor und Geschwisterselektor unterschieden. Der in der Praxis am verbreitetsten ist der Nachfahrenselektor (zum Beispiel .classname p {color:red}). Dabei wird ein Element <p> nur rot angezeigt, wenn es sich innerhalb der Klasse “classname” befindet.
Eine Gruppierung der Selektoren ist sinnvoll, wenn sie gleiche Gestaltungsanweisungen haben. So kann die CSS Datei verkürzt werden, was sich positiv auf die Ladezeit auswirkt. Wenn zum Beispiel die Überschriften h1 und h2 beide die Farbe Rot haben sollen, kann man die Selektoren mit folgender Syntax gruppieren:
h1, h2 {color:red;}
Kommentare
Kommentare in CSS Dokumenten dienen zur Erklärung des Codes. Da viele Webseitenbetreiber Ihre Seiten nicht mehr selber erstellen, sondern dies zum Beispiel von Agenturen erledigen lassen, können Kommentare ihnen helfen, die CSS Struktur besser zu verstehen und gegebenenfalls Änderungen vorzunehmen. Kommentare werden von Browsern ignoriert und können sich daher weder positiv noch negativ auf die Performance auswirken. Ein CSS Kommentar wird mit einem /* eingeleitet und mit einem */ abgeschlossen.
Suchmaschinenoptimierung durch CSS
Ein sauberer Code, von HTML über CSS bis hin zur PHP, ist für die SEO von großer Bedeutung. Damit CSS Codes sich nicht gegenseitig widersprechen, ist ein Stylesheet dem Inline-Style vorzuziehen. Der CSS Code sollte so präzise wie möglich geschrieben sein, um Browsern klare Anweisungen zu geben und auch die Dateigröße so klein wie möglich zu halten. Zwar arbeiten moderne Browser in Bruchteilen von Sekunden, sodass einige Codezeilen mehr nicht ins Gewicht zu fallen scheinen, allerdings zählt jedes noch so kleine Detail bei der SEO. Häufen sich solche Fehler nämlich an, können sich solche kleinen Details durchaus auch auf die Performance bzw. den Page Speed auswirken. Eine langsame Ladegeschwindigkeit kann dazu führen, dass Besucher die Seite wieder verlassen (Bounce Rate) oder Conversions abbrechen.
Weiterhin ist ein externes Stylesheet von Vorteil. Nicht nur, weil dann weniger Daten vom HTML Dokument geladen werden müssen. Möchte man einige Design-Änderungen vornehmen, kann man dies in der CSS machen, ohne den HTML Quelltext zu bearbeiten. Vor allen Dingen können Crawler eine Seite umso besser crawlen, je kürzer der Quelltext ist.
CSS ist vor allen Dingen für die mobile Optimierung von großer Bedeutung. So können sich Layouts mit Hilfe von Media Queries an der Bildschirmgröße des Endgeräts anpassen. Außerdem ermöglicht CSS eine barrierefreie Anzeige für Menschen mit Sehbehinderung oder Hörschwäche, da dank Stylesheet verschiedene Medien angesprochen werden können.
Häufige Fragen
Was bedeutet CSS?
CSS steht für Cascading Style Sheet und bezeichnet eine Formatierungssprache für maschinenlesbare Sprachen.
Wozu wird CSS gebraucht?
CSS dient dazu, Form und Inhalt zu trennen, sodass HTML oder XML Dokumente nur noch den Inhalt enthalten.
Woraus besteht die CSS Syntax?
Die CSS Syntax besteht aus einem Selektor und einem Deskriptor Block. Der Selektor ist das HTML Element, das formatiert werden soll. Im Deskriptor-Block befinden sich die Gestaltungsanweisungen.
Quellen
http://www.edition-w3.de/TR/1998/REC-CSS2-19980512/