Cascading Style Sheet (CSS)

Cascading Style Sheet

Copyright ┬ę Shutterstock / Song_about_summer

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.

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.
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.
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

Kostenloser SEO-Check der OSG


Weitere Inhalte