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