Cascading Style Sheets (CSS)

CSS ist eine Markup-Sprache, die die optischen Layout-Spezifikationen einer Internetseite bestimmt. Zusammen mit HTML bildet CSS die Grundlage für funktionales und optisch ansprechendes Webdesign.

In diesem Artikel lernst Du alles über CSS, seinen Aufbau und das Zusammenspiel mit HTML.

Was ist CSS?

CSS (Cascading Style Sheets) erlaubt es Webseitenbetreiber:innen, das Layout ihrer Websites und dem darauf dargestellten Text zu editieren. Dies geschieht in der Struktur eines Quellcodes, in dem unterschiedliche Befehle das Design der Seite beeinflussen.

Mit CSS kann man zum Beispiel Farben (color), Schriftarten (font-family), Schriftgrößen (font-size) oder Abstände (auch Margin oder Padding genannt) bearbeiten, ohne dass die semantischen Inhalte der Website oder der Landingpage (auch Content genannt) geändert werden.

Cascading Style Sheets (CSS) wurde Mitte der 1990er-Jahre entwickelt und ist mittlerweile der Standard unter den Sprachen zur Editierung von Stylesheets.

Festzuhalten ist zudem, dass es sich bei CSS – ebenso wie bei HTML – nicht um eine Programmiersprache, sondern um eine Markup-Sprache handelt.

Wie ist Cascading Style Sheets aufgebaut?

Cascading Style Sheets-Befehle setzen sich grundlegend aus drei Bestandteilen zusammen:

• CSS-Selektor

• Eigenschaft

• Wert

Jede CSS-Regel besteht aus einem CSS-Selektor, der klar definiert, auf welches Element sich die Code-Spezifikation beziehen soll. Selektoren können dabei zum Beispiel h-, p- oder div-Tags sein.

Die Eigenschaft legt fest, was genau mit dem jeweiligen Element passieren soll. Möchte man beispielsweise die Farbe anpassen, ist die Eigenschaft color, bei der Schriftart hingegen font.

Jede Eigenschaft in Cascading Style Sheets verfügt über einen bestimmten Wert. Dieser spezifiziert letztendlich die optische Anpassung an sich. Wenn die Farbe zum Beispiel auf grün gesetzt werden soll, wird für die Eigenschaft color der Wert green vergeben.

Die Verbindung aus Eigenschaften und Werten nennt man CSS-Deklaration. Diese steht immer in geschweiften Klammern hinter dem Selektor.

Dabei können für einen Selektor mehrere Deklarationen in den Klammern stehen, die jeweils durch Semikolons getrennt werden.

Wie hängen CSS und HTML zusammen?

Während CSS lediglich optische Designaspekte einer Website betrifft, widmet sich HTML (Hyper Text Markup Language) den inhaltlichen und strukturellen Elementen.

So können Überschriften in unterschiedlichen Hierarchischen (also H1 bis H6), Text, Tabellen, Links, Bilder etc. über HTML in einer Internetseite eingefügt werden.

Abstände, Farben und Schriftarten werden hingegen meist in CSS angepasst.

Wie hat sich CSS entwicklet?

Bei Cascading Style Sheets gibt es keine Versionen im herkömmlichen Sinne; stattdessen gibt es Level bzw. Stufen. Jedes CSS-Level baut auf der vorhergehenden auf, verfeinert die Definitionen und fügt Funktionen hinzu.

Der Funktionsumfang jeder höheren Stufe ist eine Obermenge jeder niedrigeren Stufe, und das für eine bestimmte Funktion in einer höheren Stufe zulässige Verhalten ist eine Untermenge des in den niedrigeren Stufen zulässigen. Ein User-Agent, der mit einer höheren CSS-Stufe konform ist, ist somit auch konform mit allen niedrigeren Stufen.

CSS Level 1

Die CSS-Arbeitsgruppe betrachtet die CSS1-Spezifikation als veraltet. CSS Level 1 ist in der Praxis definiert als alle Merkmale der CSS1-Spezifikation (Eigenschaften, Werte, at-Regeln usw.), aber unter Verwendung der Syntax und Definitionen der CSS 2.1-Spezifikation.

CSS Level 2

Im Laufe der Zeit haben Implementierungserfahrungen und weitere Überprüfungen viele Probleme in der CSS2-Spezifikation ans Licht gebracht. Anstatt eine bereits unhandliche Errata-Liste zu erweitern, entschied sich die CSS-Arbeitsgruppe daher für die Definition von CSS Level 2 Revision 1 (CSS 2.1).

Im Falle eines Konflikts zwischen den beiden Spezifikationen enthält CSS 2.1 die endgültige Definition. Funktionen in CSS2, die aus CSS 2.1 gestrichen wurden, sollten als Empfehlungskandidaten betrachtet werden.

CSS Level 3 und höher

CSS Level 3 baut Modul für Modul auf Level 2 auf. Jedes Modul ergänzt die CSS 2.1-Spezifikation um neue Funktionen und ersetzt einen Teil davon. Die Arbeitsgruppe beabsichtigt, dass die Cascading Style Sheets-Module nicht im Widerspruch zur CSS 2.1-Spezifikation stehen, sondern lediglich Funktionen hinzufügen und Definitionen verfeinern.

Die Module entwickeln sich je nach ihrer Komplexität und den Prioritäten der Arbeitsgruppe in unterschiedlichem Tempo. So ist zum Beispiel Selectors Level 3 bereits eine Empfehlung und es gibt sogar einen Entwurf für Selectors Level 4, während das Cascading Style Sheets-Tabellenmodul Level 3 noch ein früher Entwurf ist.

Wie setzt CSS das crossmediale Publizieren um?

Crossmediales Publizieren (oder auch Cross Media Publishing) bezeichnet das Veröffentlichen von Inhalten über verschiedene Medien. Zu betrachten sind dabei sowohl analoge Print-Kanäle als auch digitale Medien wie Websites, PDF oder ePubs.

Damit crossmediales Publizieren funktioniert, sollten semantische Inhalte und optische Layouts voneinander getrennt werden.

Hierfür kann CSS bestens verwendet werden, da hier optische Spezifikationen von den inhaltlichen Elementen in HTML separat aufgeführt werden.

Erfolgsfaktoren für Cross Media Publishing mithilfe von CSS sind unter anderem:

• Medienneutrales Aufbereiten von Inhalten

• Beschreibung der Inhalte durch Metadaten (Title, Description etc.)

• Konsistente Struktur von Inhalten & Layouts