CSS

CSS ist die Kurzform von Cascading Style Sheets, was stufenförmige Gestaltungsvorlagen bedeutet. Eingesetzt wird CSS für die Erstellung von Stilvorlagen für Websites. CSS ist eine deklarative Auszeichnungssprache, mit der HTML-Dokumente und teilweise auch Informationen in XML hinsichtlich des Layouts und des Erscheinungsbildes bearbeitet werden können. CSS wird als "living standard" bezeichnet, da sich die Sprachdefinitionen in steter Weiterentwicklung befinden. Aktuell wird das Level CSS 3 verwendet, wobei an einzelnen Arbeitsentwürfen (Working Drafts) und Modulen noch gearbeitet wird.

Allgemeine Informationen zum Thema

Die ersten Vorschläge für Stylesheets kamen zwischen 1993 und 1995 auf. Hakon Wium Lie schlug 1994 die ersten Cascading Style Sheets vor. Parallel arbeitete Bert Bos an einem Browser, der eine eigene Stylesheet-Sprache beherrschen sollte. In Chicago präsentierte Lie auf der Mosaic and the Web ‘94 das erste Mal CSS. Bos wurde auf ihn aufmerksam und fortan entwickelten beide gemeinsam CSS. Im Dezember 1996 wurde CSS Level 1 vorgestellt, welches ein Normierungsvorschlag ist, der heute von fast allen Browsern vollständig unterstützt wird.

Bereits im Mai 1998 wurde CSS Level 2 veröffentlicht, der Standard wird bis heute jedoch von keinem Browser vollständig eingeführt. Meist beschränkte sich die Unterstützung auf Teiltechniken. Seit 2002 wird CSS 2 korrigiert und Teiltechniken, die von Browsern nicht integriert wurden, sind gestrichen worden. Seit 2000 befindet sich CSS 3 in der Entwicklung. Dabei werden auch die letzten Änderungen von CSS 2 berücksichtigt. Der modulare Aufbau von CSS 3 ermöglicht die Verwendung von Teiltechniken von CSS 1 und 2. CSS3 ist also abwärtskompatibel.

Regelmäßig kommen neue Features und Funktionen hinzu, die in den Arbeitsgruppen des W3C entwickelt werden. Insbesondere vor dem Hintergrund verschiedener Endgeräte, Programmier- und Skriptsprachen hat sich diese Praxis als sinnvoll erwiesen: Sobald neue Features durch eine fehlende Unterstützung notwendig wurden, reagierte die Community und begann mit der Entwicklung. Die Hersteller zogen später nach und implementierten die Unterstützung. Ähnlich verlief dies mit Browsern und der Unterstüzung von neueren HTML-Versionen.

Neue Endgeräte führten zudem dazu, dass Webdesigner sich für bestimmte Möglichkeiten, das Layout einer Website umzusetzen, entscheiden mussten. So macht es wenig Sinn, eine jQuery-Bibliothek zu laden, wenn eine Website mit dem Smartphone aufgerufen wird. CSS 3 stellt für diese Anwendungsszenarien umfangreiche Lösungen und moderne Gestaltungsmöglichkeiten bereit. Effekte, Media Queries und viele weitere CSS-Eigenschaften lassen sich nun so auswählen, dass nicht nur das Layout, sondern auch das Verhalten des Layouts in dem jeweiligen Endgerät bestimmt werden können.

Verwendung

Als Stilsprache definiert CSS das Aussehen, bzw. das Design, von HTML-Dokumenten. In CSS wird zum Beispiel festgelegt, welche Schriftarten, Farben, Ränder und Hintergründe bestimmte HTML Elemente erhalten sollen. Dabei lassen sich beispielsweise für Überschriften erster Ordnung alle Eigenschaften, wie Größe, Schriftart, fett oder kursiv, oder für ganze Textboxen, der Hintergrund, Schriftfarbe usw., definieren. CSS beschränkt sich also auf die Formatierung oder das Layout. Die Aufgaben von HTML bleiben in der Strukturierung des Inhalts von Webseiten. Diese Trennung von Inhalt und Layout ist bei vielen Auszeichnungssprachen maßgebend; sie sorgt dafür, dass das Aussehen des Inhalts verändert werden kann, ohne den Inhalt selbst zu ändern.

Die Gestaltung einer Website mit CSS erfolgt über CSS-Dateien, die referenziert werden, oder sogenannte inline-Befehle, die im HTML-Quellcode im HEAD-Bereich im <style>-Element notiert werden können. Es wird allerdings empfohlen, das Layout gesondert in eine CSS-Datei zu schreiben. Durch CSS können unterschiedliche Layouts für verschiedene Ausgabemedien, wie Print, Projektion oder Bildschirme mit variierenden Auflösungen erstellt werden. Gerade bei der Vielzahl der unterschiedlichen mobilen Geräte ist dies eine Erleichterung für alle Benutzer. Eine einheitliche Definition für unterschiedliche Ausgabemedien ermöglicht es, Layout und Textfluss für das Ausgabeergebnis so zu optimieren, dass die Inhalte leicht konsumiert werden können.

Syntax

CSS-Dateien werden als Stylesheets bezeichnet. Regeln sind die Basis für ein Stylesheet. Jede Regel enthält mindestens einen Selektor und ein Paar geschweifte Klammern, die Attribut-Wert-Paare beinhalten. Zusammen bilden sie den Deklarationsblock. In ihm sind eine Eigenschaft, gefolgt von einem Doppelpunkt, gefolgt von einem Wert notiert. Der Wert kann optional mit einem Semikolon abgeschlossen werden.

Beispiel: ein Selektor besteht aus: Selektor { Eigenschaft:Wert; } 

Der Selektor selektiert das gewünschte Element, z.B. eine Textbox oder Überschrift. Eigenschaft und Wert definieren die Darstellung. Zum Beispiel die Schriftart von einem Textfeld, fett geschrieben in TimesNewRoman:

#Text01 { font:bold Times; }

Mithilfe der Selektoren können einzelne Teile eines Dokuments oder auch Gruppen von Elementen referenziert werden.

Selektor1, Selektor2 { Eigenschaft:Wert; } 

Die Klammern, die Attribut-Wert-Paare enthalten, sind die Bedingungen, die an den Selektor oder die Selektoren geknüpft sind: Wenn das Element im Quellcode der aktuellen Seite vorhanden ist und korrekt angezeigt werden soll, muss es entsprechend den Eigenschaften und Werten ausgegeben werden.

Selektoren

Es gibt verschiedene Arten von Selektoren:

• Einfache Selektoren: Der Universalselektor * und der Typselektor element zählen dazu. Auch .class und #id sowie unterschiedliche Attributsselektoren sind einfache Selektoren.
• Kombinatoren verketten mehrere Selektoren miteinander. Dadurch können Vererbungs- und Verwandtschaftsbeziehungen ausgedrückt werden.
• Pseudoelemente sind Selektoren, die nicht auf ein Element beschränkt sind – wie es bei einfachen Selektoren der Fall ist. Mit ihnen lässt sich zum Beispiel der erste Buchstabe eines Absatzes besonders groß formatieren, wie es viele Print-Zeitungen machen.
• Pseudeklassen sind einfache Selektoren, die ein Element genau dann ansprechen, wenn es eine bestimmte Eigenschaft erfüllt. Es wird zwischen strukturellen und dynamischen Pseudoklassen unterschieden. Erstere erlauben es, bestimmte Elemente in der HTML-Struktur zu selektieren. Letztere greifen Elemente aufgrund einer Benutzerinteraktion heraus. Der Hover-Effekt ist ein Beispiel hierfür.

Zu den Selektoren kommt eine Vielzahl an Eigenschaften hinzu, die Schriftbilder, Formatierungen, Textausrichtungen und viele weitere CSS-Eigenschaften beinhalten. Empfehlenswert ist eine Kurzreferenz, um alle möglichen Eigenschaften schnell verfügbar zu haben.

CSS Box Modell und Media Queries

Um diese Selektoren anzuwenden, ist die Kenntniss des CSS-Box-Modells notwendig: Jede Website wird als Box betrachtet, die durch bestimmte Eigenschaften beschrieben ist. Dazu zählen die Eigenschaften für die vier Seiten der Box (top, left, right, bottom) sowie jeweils vier Margin, Border und Padding-Befehle. Grundsätzlich lässt sich mit diesem Konzept ein Layout beschreiben, das durch die Positionen und Abstände von einzelnen Elementen definiert ist. Die CSS-Box ist sozusagen ein abstraktes Raster, das es erlaubt, das Layout genau festzulegen.

Ein ähnliches Konzept kommt bei Media Queries zur Anwendung. Media Queries wurden mit CSS 3 eingeführt. Sie fragen die Eigenschaften des Endgerätes ab, mit dem Inhalte dargestellt werden. So können zum Beispiel die Breite und Höhe des Browserfensters abgefragt werden, um Inhalte an mobile Browser anzupassen. Meist werden Pixelwerte notiert. Handelt es sich um größere, normale Browserfenster, kommen die herkömmlichen Eigenschaften zum Tragen, die der Webdesigner vorab definiert hat. Eine Verallgemeinerung von Abfragen kann mit dem sogenannten Viewport erreicht werden, der mittels eines Meta-Elementes in den Quellcode integiert wird:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Bedeutung für die Suchmaschinenoptimierung

Gemäß der Trennung von Layout und Inhalt sollten CSS-Dateien möglichst ausgelagert werden und sich nicht im HTML-Quellcode befinden. Zwar ist dies lediglich eine Empfehlung, aber vor dem Hintergrund von validem Quellcode, ist dies durchaus sinnvoll. Zumal der Dateiumfang sich auch auf die Ladezeiten einer Website auswirkt und die User Experience verbessert. Darüber hinaus können bei einer klaren Trennung von Inhalt und Layout sehr leicht Testing-Szenarien umgesetzt werden. Denn der Inhalt muss nicht geändert werden, um verschiedene Designs und die Akzeptanz der Nutzer zu testen. Langfristig betrachtet, spart diese Trennung Zeit, die Webmaster anderweitig investieren können – zum Beispiel in den Linkaufbau oder die OnPage Optimierung.

Mithilfe von CSS können Inhalte zudem so ogranisiert werden, das sie bestimmte semantische Auszeichnungen beinhalten und in unterschiedlichen Ausgabemedien reibungslos funktionieren. Auf diese Weise kann eine sehr klare HTML-Struktur erreicht werden, die sich wahrscheinlich positiv auf das Crawling und die Indexierung durch Suchmaschinen auswirkt. Ein Beispiel hierfür sind sogenannte CSS-Menüs, die ohne JavaScript auskommen. Die meisten Suchmaschinen empfehlen eine solche Navigation. Demgegenüber stehen einige CSS-Tricks und CSS-Hacks, die es zu vermeiden gilt: Mit CSS sollten keine Inhalte wie Text und Bilder versteckt werden. Möglicherweise bewerten Suchmaschinen dies als Täuschungsversuch.

Auch die Vielzahl an Ausgabemedien macht ein klares CSS-Set Up notwendig: Werden Inhalte mit CSS auf bestimmte Weise ausgezeichnet, ist die Anzeige dieser Inhalte auf verschiedenen Endgeräten problemlos möglich. Nutzer können solche Inhalte leichter abrufen – auch unabhängig davon, welcher Browser vom Nutzer verwendet wird.

Weblinks

• CSS verstehen
• CSS Tutorial
• Einführung in CSS3
• Hintergründe zu HTML5 und CSS3