CSS

Was ist CSS?

CSS ist die Abkürzung für Cascading Style Sheets, was sich am besten mit „gestufte Stilvorlagen“ übersetzen lässt. Dabei handelt es sich um eine Gestaltungs- und Formatierungssprache, mit deren Hilfe sich das optische Erscheinungsbild elektronischer Dokumente (z. B. HTML-Websites) bestimmen lässt. Anhand einfacher Anweisungen im Quelltext ist es so möglich, gestalterische Elemente wie das Layout, die Farben oder die Typografie anzupassen, ohne dabei Struktur oder Inhalt des Dokuments zu verändern. Diese strikte Trennung zwischen Design und Inhalt bietet unter anderem bei der Wartung von Websites viele Vorteile, weshalb sich CSS zur Standard-Stylesheet-Sprache im Web entwickelt hat und von allen gängigen Webbrowsern unterstützt wird. ^[1]

Wie ist CSS entstanden?

Das Konzept für Cascading Style Sheets wurde erstmals im Jahr 1994 von CERN-Forscher Håkon Wium Lie vorgelegt, der hier zusammen mit Tim Berners-Lee, dem Erfinder des Webs, zusammenarbeitete. Ziel war es eine Formatierungssprache zu entwickeln, die eine Trennung der optischen Gestaltung und der eigentliche Inhalte von HTML-Dokumenten ermöglicht. Nachdem 1995 das World Wide Web Consortium (W3C) auf CSS aufmerksam wurde, arbeitete Håkon zusammen mit dem Informatiker Bert Bos an der Weiterentwicklung der Cascading Style Sheets.

Im Dezember 1996 wurde schließlich die CSS Level 1 Recommendation publiziert und hielt Einzug in die Rendering-Engines der Webbrowser. Ab diesem Zeitpunkt wurde CSS durch das W3C als „living standard“ (lebendiger Standard) kontinuierlich weiterentwickelt. So wurde bereits 1998 CSS Level 2 (CSS 2.0) als Empfehlung veröffentlicht. Im Juni 1999 folgten die ersten Entwürfe für CSS Level 3 (CSS 3.0), das bis heute die aktuellste Version ist. Ein CSS 4.0 wird es laut Experten nicht geben , dennoch wird die Stylesheet-Sprache kontinuierlich weiterentwickelt und um neue Funktionen und Module erweitert. ^[2]

Welche Vorteile bietet die Nutzung von CSS?

Bei der Webentwicklung sind Cascading Style Sheets eine große Erleichterung. Sie eröffnen bei der optischen Aufbereitung von Inhalten gestalterische Möglichkeiten, die HTML allein nicht bieten kann. So lassen sich zum Beispiel wiederkehrende Elemente in Dokumenten wie Hyperlinks mit einem einzigen Befehl formatieren. Diese Befehle können in Form eines internen Stylesheets direkt in dem jeweiligen Dokument vermerkt oder aber in eine externe Stylesheet-Datei geschrieben und ausgelagert werden. Letztere Variante hat den großen Vorteil, dass sich die Datei mit den CSS-Anweisungen mit einem kurzen Befehl in jede beliebige HTML-Datei importieren lässt. So lassen sich Änderungen nicht nur auf Ebene einzelner Dokumente, sondern ganzer Websites durchführen.

Ein Beispiel: Die Schriftart einer Website soll von Arial zu Verdana wechseln. Bei intern genutzten CSS-Anweisungen muss dazu jedes einzelne Dokument geöffnet werden, um die Änderung vorzunehmen. Bei ausgelagerten CSS-Anweisungen reicht es hingegen aus, die CSS-Datei zu öffnen, die Schriftart zu wechseln und die Datei zu speichern. Die Änderungen sind unmittelbar danach in allen Dokumenten, die die CSS-Anweisungen aus dieser Daten importieren, sichtbar.

Ein weiterer Vorteil von Cascading Style Sheets ist, dass sich Webinhalte mit relativ geringem Aufwand für die Darstellung auf unterschiedlichen Devices wie PC, Smartphone oder Tablet anpassen lassen. In diesem Zuge wird auch häufig von „Responsive Webdesign“ gesprochen, bei dem sich das Layout einer Website mithilfe von CSS automatisch an den Bildschirm des jeweiligen Endgeräts anpasst. CSS bietet aber nicht nur die Möglichkeit, die Hintergrundfarbe oder die Schriftart einer Website zu bestimmen, sondern kann in der aktuellen Fassung auch für aufwendige Animationen^[2] genutzt werden.

Nicht zuletzt hat CSS den Vorteil, dass sich der Webinhalt auch ohne das Stylesheet durch zum Beispiel reine Textbrowser oder Braille Browser nutzen lässt. So werden sehbehinderte Menschen nicht durch das Webdesign ausgeschlossen und können die Inhalte weiterhin konsumieren. ^[3]

Wir funktioniert CSS?

Wenn ein Webbrowser die Inhalte einer Website abruft und anzeigt, kombiniert er den Content mit den CSS-Anweisungen. Dazu konvertiert er das HTML zunächst in ein DOM (Document Object Model). Anschließend ruft der Browser sämtliche Dateien (z. B. JavaScript– und CSS-Dateien, aber auch Bilder und Videos) ab, die in dem Dokument eingebunden sind und parst diese. Bei CSS-Dateien ordnet der Browser im nächsten Schritt die einzelnen Anweisungen den passenden Nodes innerhalb des DOM. Nach dem abschließenden Rendering werden die Inhalte mit den ihnen zugewiesenen Regeln auf dem Display ausgegeben ^[4].

Wie ist eine CSS-Anweisung aufgebaut?

Jede CSS-Anweisung besteht aus einem Selektor (selector) sowie Eigenschaften und Werten. Die Eigenschaften (property) und ihre Werte (values) werden bei Cascading Style Sheets immer innerhalb von geschweiften Klammern deklariert. Besitzt ein Selektor mehrere Eigenschaften, werden diese durch ein Semikolon voneinander getrennt. Das folgende einfache Beispiel soll den grundlegenden Aufbau einer CSS-Anweisung veranschaulichen:

Selektor { Eigenschaft: Wert; }

Möchte man nun beispielsweise alle H2-Überschriften einer Website einheitlich gestalten, könnte die CSS-Anweisung dafür wie folgt aussehen:

h2 {
font-family: Verdana;
font-size: 12pt;
font-weight: bold;
color: black;
}

Als Selektor dient in diesem Fall H2. Der Browser wird dadurch angewiesen, sämtliche HTML-Tags des Typs H2 mit den gestalterischen Vorgaben innerhalb der geschweiften Klammern zu versehen. Hier sind unter anderem die Schriftart (font-family), die Schriftgröße (font-size), die Schriftstärke (font-weight) und die Schriftfarbe (color) vorgeben. Neben diesen gibt es noch viele weitere Eigenschaften, die sich innerhalb von CSS-Anweisungen verwenden lassen.

Weitere Gestaltungsmöglichkeiten bieten sogenannten Pseudoklassen. Über diese lässt sich beispielsweise definieren, wie sich ein Hyperlink verhalten soll, wenn der Nutzer mit der Maus oder (bei Touchscreens) mit dem Finger über den Linktext fährt. Damit in diesem Beispiel die Farbe des Links zu rot wechselt, würde dem Selektor „a“ (für Hyperlink) die Pseudoklasse „hover“ (zu Deutsch: schweben) hinzugefügt:

.a:hover { font-weight: bold; color: red; }

Weitere häufig genutzte Pseudoklassen wären in diesem Fall

:active (aktiv angeklickter Link)

und :visited (bereits besuchter Link) ^[5]

Wie wird CSS in eine Website eingebunden?

Wie bereits oben erwähnt, lassen sich CSS-Anweisungen auf unterschiedliche Weise in Dokumente integrieren. Eine Variante ist der Inline-Style. Bei diesem werden die CSS-Anweisungen direkt an das gewünschte Element innerhalb des HTML-Quelltextes geschrieben. Das ist besonders dann von Vorteil, wenn CSS-Anweisungen nur für dieses eine Element und nicht, wie es sonst bei CSS häufig der Fall ist, übergreifend gelten sollen.

Eine weitere Möglichkeit bietet das Internet-Stylesheet. Hierbei werden die CSS-Anweisungen von dem „style“-HTML-Tag eingefasst in den Header eines HTML-Dokuments geschrieben. Wie der Inline-Stylte gelten diese Anweisungen nur für dieses eine Dokument. Anders verhält sich dies bei einem externen Stylesheet. Bei diesem werden die CSS-Anweisungen in eine Textdatei geschrieben, die mit der Dateiendung „.css“ gespeichert wird. Diese wird anschließend mittels des „link“-HTML-Tags in den Header alle Dokumente eingebunden, für die die Anweisungen gelten sollen. Dies hat den großen Vorteil, dass sich Änderungen an mehreren Dokumenten zentral in einer Datei vornehmen lassen. ^[6]

Weblinks

– CSS Level 1 Recommendation – https://www.w3.org/TR/REC-CSS1-961217.html
– Homepage von CSS-Erfinder Håkon Wium Lie – https://www.wiumlie.no/en