Skip to main content

Cascading Style Sheet (CSS)

Was sind Cascading Style Sheets (CSS)?

Cascading Style Sheet ist die Bezeichnung für eine formale Sprache der IT, die für die Gestaltung digitaler Dokumente im Internet verwendet wird. Die gängige Abkürzung für Cascading Style Sheet ist CSS. Neben der textbasierten Auszeichnungssprache HTML und der Schnittstellenspezifikation Document Object Model (DOM) ist die Stylesheet-Sprache Cascading Style Sheet eine der drei zentralen Sprachen des World Wide Web. Auf Deutsch übersetzt bedeutet der Ausdruck Cascading Style Sheet in etwa “gestufter Gestaltungsbogen”. Durch ein Cascading Style Sheet kann das Layout von Benutzeroberflächen und Dokumenten in Webanwendungen bestimmt werden. Sie definieren das Aussehen einer Internetseite – ihren Style.

Die Funktionsweise eines Cascading Style Sheet ähnelt der Verwendung einer Formatvorlage in Textbearbeitungsprogrammen. Über ein Cascading Style Sheet können Stilvorlagen für das Design von Webseiten aufgebaut werden. In den Vorlagen werden Informationen zur Formatierung von Elementen (Schrift, Textfelder, Bilder, Rahmen, Listen etc.) einer Internetseite hinterlegt. Daneben können auch Vorgaben eingebaut werden, welche Designvariation einer Webseite auf jeweils unterschiedlichen Endgeräten oder Bildschirmgrößen angezeigt werden soll (Responsive Design). Dieses in einem Cascading Style Sheet vordefinierte Set an Gestaltungsanweisungen kann in Kombination mit HTML und XML eingesetzt werden

Grundidee hinter einem Cascading Style Sheet

In einem Cascading Style Sheet wird beschrieben, wie HTML-Elemente auf einem Bildschirm, in einer Projektion oder auch in gedruckter Form dargestellt werden. Ein Cascading Style Sheet ist für Webdesigner ein mächtiges Tool, da über ein einziges CSS das Layout mehrerer Webseiten in einem Arbeitsgang angepasst werden kann. Dazu ist lediglich die Änderung einer einzigen Vorlagendatei nötig. Diese externen Stylesheets werden in .css-Dateien gespeichert. Wird diese Datei ausgetauscht, kann damit das Erscheinungsbild des gesamten Webauftritts aktualisiert werden. Cascading Style Sheet wurde entwickelt, um im Web Development eine Möglichkeit zu schaffen, die gestalterische Darstellung einer Webseite von ihrer über HTML definierten Struktur und ihrem Inhalt zu trennen.

HTML war nie dafür konzipiert, tags (Auszeichnungsmarkierungen) zu enthalten, die zur Formatierung von Webseiten dienen. HTML wurde entwickelt, um den Inhalt einer Internetseite über tags zu beschreiben. Mit HTML wird definiert, welche Funktion ein Element einer Webseite besitzt, ob es sich beispielsweise um eine Überschrift, ein Bild oder einen Textabschnitt handelt. Als in HTML tags für die Definition von Schriftgrößen und Farben eingeführt wurden, verkomplizierten diese neuen Marker die Arbeit der Webdesigner. Informationen zum Layout müssen über HTML jeder Einzelseite mitgegeben werden. Die Entwicklung von umfangreichen Webprojekten gestaltet sich dadurch sehr aufwendig. Insbesondere Änderungen am Stil eines Webauftritts sind sehr zeit- und kostenintensiv. Die Anpassungen sind an zahlreichen Stellen für jede Seite oder sogar auf Ebene einzelner Elemente einzutragen. Um dieses Problem zu lösen, wurde die Sprache Cascading Style Sheet entwickelt.

Mit der Einführung von CSS wurde die Style Formatierung aus den HTML-Elementen herausgelöst. Über ein CSS können alle Layout-Elemente definiert werden, dazu gehören neben Schriftgrößen und -farben auch Seitenhintergründe oder -ränder. CSS kann auch zur Darstellung von interaktiven Elementen einer Webseite eingesetzt werden. Um über ein Cascading Style Sheet Webseiten gezielt für die Darstellung auf unterschiedlichen Ausgabegeräten abzustimmen, können in der CSS-Anweisung genaue Spezifikationen für verschiedene Medientypen mitgegeben werden.

Entwicklung der CSS Level

Die deklarative Auszeichnungssprache Cascading Style Sheet wurde im Oktober 1994 vom norwegischen Informatiker Håkon Wium Liem, der damals am CERN arbeitete, in einem Grundlagenpapier veröffentlicht. Das World Wide Web Consortium (W3C) griff das Konzept auf und entwickelte es unter der Mitarbeit von Liem weiter. Im Dezember 1996 wurden die Ergebnisse zusammengefasst und als CSS Level 1 Recommendation der Öffentlichkeit vorgestellt. Praktisch alle Browser unterstützen diesen Standard nahezu vollständig. Im Mai 1998 folgte die Empfehlung CSS Level 2 (CSS2). Der Nachfolger CSS Level 3 (CSS3), dessen Entwicklung im Jahr 2000 begann, erhält einen grundlegend anderen Aufbau als seine Vorgänger.

CSS3 setzt sich aus verschiedenen Modulen zusammen und ist abwärtskompatibel zu den vorhergehenden Standardisierungsvorschlägen. Die modulare Konzeption ermöglicht den Ausbau einzelner Teilaspekte in separaten Versionen. Dadurch wird CSS3 vom Funktionsumfang her mit der Formatierungs- und Transformationssprache DSSSL (Document Style Semantics and Specification Language) vergleichbar. Cascading Style Sheet soll auf diese Weise eine Option zu Stylesheet-Sprachen sein, die auf der Grundlage von XML arbeiten (z. B. XSL-FO). Trotz der weiten Verbreitung von CSS bei Webdesignern und -entwicklern handelt es sich bei einem Cascading Style Sheet um einen lebendigen Standard. Die kontinuierliche Weiterentwicklung läuft weiterhin unter der Federführung des World Wide Web Consortiums. Wenn zusätzliche Anforderungen aufgrund neuer Entwicklungen in anderen Programmier- oder Skriptsprachen oder im Bereich Endgeräte an den Funktionsumfang von CSS gerichtet werden, entwickeln Arbeitsgruppen des W3C bedarfsorientierte Erweiterungen.

Logischer Aufbau von CSS

Nach der Grundidee von CSS werden Layout-Eigenschaften kaskadierend übertragen. Ausgehend von dieser Logik werden die verschiedenen Elemente innerhalb eines CSS hierarchisch in einer Baumstruktur angeordnet. Jedes Element eines Dokuments vererbt die ihm zugeordneten Style-Eigenschaften an seine Nachfolger weiter. Die einzelnen Design-Merkmale, die für bestimmte Bereiche eines Dokuments gelten sollen, werden in einer CSS-Anweisung zusammengefasst.

Einbindung von CSS in HTML

Die CCS-Anweisungen können auf unterschiedliche Arten im Code verankert werden. Sie können per inline-Befehl direkt in eine HTML-Datei eingebunden werden. Die CSS-Gestaltungsanweisung kann dabei direkt an ein HTML-Element angeheftet werden und gilt dann nur für genau dieses Element. Wird der CSS-Code in den Header einer HTML-Datei geschrieben, hat die so vergebene Formatierung für den gesamten Inhalt Gültigkeit. Die deutlichste Aufspaltung zwischen Inhalt und Gestaltung wird erreicht, wenn das CSS in einer eigenen Datei definiert und als externe Datei in ein HTML-Projekt eingebunden wird. Die Stildefinition wird dazu über einen Link in den HTML-Code integriert und als externe .css-Datei im Quellcode referenziert. Diese .css-Datei kann in mehrere HTML-Seiten eingebettet werden.

Zuweisung von Stilvorlagen zu einzelnen Elementen

Eine Designdefinition in einem Cascading Style Sheet besteht immer aus zwei Komponenten. Sie verfügt über einen Selektor, der festlegt, welche Klasse von Elementen angesprochen wird. Neben dem Selektor beinhaltet ein Cascading Style Sheet die Eigenschaften. Sie bestimmen, welche Formatierungsaktion ausgelöst wird. Bei den Selektoren stehen verschiedene Arten zur Verfügung. Die Elemente können über Class oder ID angesprochen werden.

Der Vorteil von Class ist, dass er mehrfach innerhalb eines HTML-Dokuments aufgerufen werden kann. Mit nur einer Vorlage kann so das Erscheinungsbild mehrerer HTML-Elemente bestimmt werden. Mithilfe einer Class-Vorlage können beispielsweise wichtige Textpassagen an verschiedenen Stellen einer Internetseite über eine andersfarbige Schrift betont werden. Im Gegensatz dazu darf der Selektor ID nur ein einziges Mal pro HTML-Dokument eingesetzt werden. Besondere Elemente, die nur einmal innerhalb der HTML-Seite vorkommen, können über eine Gestaltung per ID hervorgehoben werden. Sie sind über ihren Style eindeutig gekennzeichnet. Für eine Gestaltung über den Bezeichner ID bietet sich z. B. der Navigationsbereich einer Internetseite an.

Vorteile von Cascading Style Sheet

Die Layout-Steuerung über ein externes Cascading Style Sheet vereinfacht den Aufbau von Testumgebungen. Verschiedene Erscheinungsformen einer Webseite können ohne großen Aufwand miteinander verglichen werden. Die Nutzerreaktion auf unterschiedliche Designs kann dadurch auf einfache Weise getestet werden. Wenn die Formatierung von Webinhalten über CSS erfolgt, kann der Content über den HTML-Code mit semantischen Auszeichnungen versehen werden. Suchmaschinen greifen auf diese maschinenlesbaren Meta-Angaben zurück, um Webinhalte zu ordnen und zu klassifizieren.

Durch den Boom der mobilen Endgeräte wird eine auf das jeweilige Zugriffsdevice optimierte Anzeige einer Webseite zunehmend wichtiger. Mit einem Cascading Style Sheet lässt sich das Verhalten des Layouts nicht nur für unterschiedliche Bildschirmauflösungen festlegen. Über Medienabfragen, sogenannte Media Queries, kann abgefragt werden, von welchem Medientyp der Aufruf der Internetseite ausgeht. Für jeden Medientyp kann in einer CSS-Anweisung bestimmt werden, wie die Ausgabe erfolgen soll. Für mobile Versionen brauchen beispielsweise Animationen oder Skripte, die in mobilen Browsern nicht benötigt werden, gar nicht erst geladen werden.

CSS im Online Marketing und bei der Suchmaschinenoptimierung

Eine klare Trennung von Inhalt einer Webseite und ihrem Design birgt für die Suchmaschinenoptimierung eines Webauftritts mehrfach Vorteile. Durch die Auslagerung der Formatierungsvorgaben in eine .css-Datei verringert sich der Umfang des HTML-Quellcodes der Seite. Durch den schlankeren Quellcode verbessert sich ihre Ladezeit, sie lässt sich schneller von Nutzern aufrufen. Kürzere Ladezeiten führen sowohl zu einer höheren Usability und User Experience als auch einer besseren Bewertung durch Suchmaschinen. Die Arbeit mit einem Cascading Style Sheet gehört daher zum Standardprogramm im Rahmen einer Onpage Optimierung.

Suchmaschinen testen für ihr Ranking zudem, ob der Programmcode einer Internetseite durchgängig valide ist. Dazu überprüfen sie, ob der Code HTML-Fehler enthält und formalen Richtlinien entspricht. Als Maßstab dienen z. B. die vom W3C veröffentlichten Standards. Da das Cascading Style Sheet zu diesen Standards gehört, erfüllt ihre Verwendung die Voraussetzungen für validen Code. Der gesamte Webauftritt eines Unternehmens präsentiert sich durch den Einsatz von Cascading Style Sheets aus einem Guss. Unabhängig davon, welchen Onlinekanal oder welches Device ein Seitenbesucher nutzt, er trifft immer auf ein einheitliches Design.

Tipp

Unternehmen erzielen durch Cascading Style Sheets einen hohen Wiedererkennungswert ihres Onlineangebots. Damit unterstützen sie direkt ihr Branding und auch das Content Marketing profitiert.

Sie haben noch Fragen?

Kontaktieren Sie uns

Cascading Style Sheet (CSS)
Beitrag bewerten