CSS

Stand: 29.11.2022

CSS (Cascading Style Sheets) (deutsch: stufenförmige Gestaltungsvorlagen) ist eine Stylesheet-Sprache, mit der HTML-Dokumente hinsichtlich ihres Layouts und Aussehens konfiguriert werden können. Die deklarative Auszeichnungssprache kommt vor allem bei der Gestaltung von Webseiten zum Einsatz. Mit der CSS lassen sich stilistische Parameter wie Farben, Ränder, Hintergründe, Schriftarten, Schriftstile und Zeichengrößen definieren. Die Stilsprache wird stetig weiterentwickelt. Aktuell wird das Level CSS3 verwendet.

Definition

CSS ist eine Stylesheet-Sprache, mit der HTML-Dokumente hinsichtlich ihres Layouts und Aussehens konfiguriert werden können. Mit der deklarativen Auszeichnungssprache lassen sich stilistische Parameter wie Farben, Ränder, Hintergründe, Schriftarten, Schriftstile und Zeichengrößen für einzelne Elemente in einem HTML-Dokument definieren. CSS steht dabei für Cascading Style Sheets (deutsch: stufenförmige Gestaltungsvorlagen). Die Stilsprache kommt dabei vor allem bei der Gestaltung von Webseiten zum Einsatz. Diese Unterteilung mithilfe unterschiedlicher Auszeichnungssprachen erleichtert die Gestaltung einer Webseite, da der Inhalt der Webseite unabhängig von den Eingaben in CSS bleibt.

Hintergrund und Anwendung

Mithilfe von CSS können die einzelnen Elemente innerhalb eines HTML-Dokuments unter anderem hinsichtlich ihrer Farbe, der Schriftgröße und des Hintergrunds definiert werden. Dementsprechend können beispielsweise Überschriften erster Ordnung (H1) bezüglich des Schriftstils angepasst und einzelne Textboxen durch auffällige Hintergrundfarben hervorgehoben werden. Während CSS sich als Stilsprache ausschließlich auf die Formatierung bezieht, ermöglicht HTML die Strukturierung des Contents einer Webseite. Um diese Trennung nicht zu durchbrechen wird das Definieren der Gestaltungsparameter in einer externen CSS-Datei empfohlen.

Wird eine Webseite mit CSS formatiert, geschieht dies mithilfe unterschiedlicher CSS-Dateien oder inline- Befehlen. Die Definition der stilistischen Parameter erfolgt im HEAD-Bereich innerhalb des < style >-Elements. Neben der Gestaltung der Elemente innerhalb des Dokuments können mithilfe von CSS auch Konfigurationen hinsichtlich des Layouts auf unterschiedlichen Endgeräten und Ausgabemedien vorgenommen werden. Durch eine einheitliche Definition des Layouts für verschiedene Endgeräte und Ausgabemedien, kann die Gestaltung der Elemente für jedes Medium so optimiert werden, dass der Nutzer die Webseite bestmöglich nutzen und die Inhalte leicht konsumieren kann.

CSS wird vor dem Hintergrund der Vielzahl an unterschiedlichen Endgeräten, Programmier- und Skriptsprachen stetig weiterentwickelt. Aktuell wird das Level CSS3 verwendet. Besonders in Hinblick auf die Gestaltung von Webseiten für die Darstellung auf mobilen Endgeräten bietet CSS3 vielfältige Lösungen und moderne Gestaltungsmöglichkeiten an. Neue Features und Funktionen werden dabei von einer selbstständigen Community, die eng mit den Herstellern zusammenarbeitet, entwickelt.

Bestandteile und Syntax

CSS-Dateien werden als Stylesheets bezeichnet. Die Gestaltung von solchen Gestaltungsvorlagen basiert auf einem umfassenden Regelwerk. Jede Regel baut sich dabei aus zwei Bestandteilen auf: einem Selektor, der das zu definierende Seitenelement enthält (z.B. H1 oder Textbox), und einem in geschweiften Klammern gesetzten Attribut-Wert-Paar, bestehend aus der Angabe der Eigenschaft (z.B. Farbe) und der Festlegung eines entsprechend Wertes. Beide Bestandteile bilden zusammengenommen einen Deklarationsblock.

Es können verschiedene Arten von Selektoren unterschieden werden: Der Universalselektoren *, der Typselektor element, der .class-Selektor, der #id-Selektor und unterschiedliche Attributs-Selektoren zählen zur Gruppe der einfachen Selektoren. Darüber hinaus gibt es Kombinatoren, die der Verkettung mehrerer Selektoren dienen. Pseudoelemente sind Selektoren, die sich für mehrere unterschiedliche Elemente anwenden lassen, um beispielsweise den ersten Buchstaben eines Absatzes markanter und größer zu gestalten, wie es in vielen Printprodukten der Fall ist. Die letzte Selektorart bilden Pseudoklassen. Sie ermöglichen es als Selektor einzelne Elemente mit derselben Eigenschaft miteinander zu verknüpfen. Dabei unterscheidet man strukturelle (an dieselbe Formatierung geknüpft) und dynamische (an Benutzerinteraktionen geknüpft) Pseudoklassen. Um diese Selektoren erfolgreich anzuwenden, ist die Kenntnis des CSS-Box-Modells notwendig.

Media Queries in CSS

Media Queries (deutsch: Mediaabfragen) fragen die Eigenschaften des verwendeten Endgerätes ab, um die Inhalte darauf anzupassen und für den entsprechenden Viewport und die Bedienungsmöglichkeiten optimiert darzustellen. So können die Inhalte für verschiedene Browser und vor allem mobile Browser darstellbar gemacht werden. Das Ausgabeformat basiert dabei auf den Zuvor definierten Layouts für die unterschiedlichen Ausgabemedien. Media Queries unterstützen Responsive Design.

Bedeutung für SEO

Wird CSS nicht direkt im HTML-Dokument sondern in einer externen CSS-Datei angelegt, können Ladegeschwindigkeiten verbessert und dadurch die Usability einer Webseite gesteigert werden. Durch eine klare Trennung von Layout und Inhalt in unterschiedlichen Dateien wird auch das Testing der Webseitenfunktionen und der Bedienfreundlichkeit erleichtert, da gestalterische Anpassungen vorgenommen werden können, ohne in den Quellcode einzugreifen.

Auch die Optimierung des Layouts der Inhalte für unterschiedliche Ausgabemedien mithilfe von CSS trägt zu einer Steigerung der User Experience und bei kommerziellen Seiten somit zu einer Verbesserung der Konversionsrate. Darüber hinaus kann sich eine klare und bereinigte HTML-Struktur auch positiv auf die Indexierung der Webseite durch Bots und Crawler auswirken.

Lars Tholen

Geschäftsführer
Digital Solutions

Sie interessieren sich für das Thema "CSS"

Löwenstark bietet als Full-Service-Marketing-Agentur umfassende Beratung und professionelle Leistungen. Lassen Sie sich von Lars Tholen kostenfrei beraten.

Jetzt Kontakt aufnehmen