Definition „Cascading Style Sheets“ Wofür braucht man CSS?

Anbieter zum Thema

Stäubli TEC-Systems GmbH Connectors

CSS steht für Cascading Stylesheets und wird in der Webentwicklung genutzt, um die Inhalte von Webseiten optisch aufzubereiten. Per CSS können viele Eigenschaften von HTML-Elementen individuell gestaltet werden, z. B. Größe, Schriftart, Position oder Hintergrundfarbe.

´Die Oberfläche einer Webseite setzt sich aus Informationen (z. B. Texte, Bilder, Videos) und strukturgebenden HTML-Elementen (z. B. Überschriften, Tabellen, Formulare) zusammen. Ohne CSS sieht eine Webseite sehr simpel aus, weil sie mit den Standardwerten dargestellt wird, die der Browser vorgibt, also z. B. schwarzer Text auf weißem Hintergrund.

CSS ermöglicht es, die Darstellung einer Webseite detailliert zu steuern. Moderne Webanwendungen wären ohne CSS undenkbar. Sie enthalten so viele Informationen und Elemente, dass sie ohne CSS unübersichtlich bis unlesbar wären.

Per CSS können vier wesentliche Komponenten der grafischen Benutzeroberfläche einer Webseite beeinflusst werden, nämlich:

• Farben: Die Farben von Texten, Hintergründen und Elementen können individuell festgelegt werden.

• Typografie: Größe, Farbe, Schriftart und Ausrichtung aller Textelemente können nach Bedarf gestaltet werden.

• Layout: Die Positionierung aller Elemente einer Website kann beeinflusst werden, um die Inhalte benutzerfreundlich oder kreativ aufzubereiten.

• Animationen: Die Elemente einer Website können animiert werden, um dynamische Effekte oder einen Blickfang zu schaffen.

Wie funktioniert CSS?

In einem Stylesheet findet sich eine Sammlung von Anweisungen bezüglich der optischen Gestaltung einer Webseite, die von jedem modernen Browser interpretiert werden können. Ein Stylesheet kann je nach Bedarf einige wenige oder mehrere Hundert Anweisungen enthalten. Damit CSS ein bestimmtes Element einer Webseite beeinflussen kann, muss es wissen, wie es dieses ansprechen soll. Hierfür werden Selektoren verwendet, welche über den darauf folgenden Deklarationsblock eine Reihe von Anweisungen an das gewählte Element weitergeben.

Selektoren

Unter CSS sind drei allgemeine Arten von Selektoren möglich:

• Elemente: Feststehende HTML-Elemente, z. B. a, body, p, div.

• Klassen: Frei vergebbare und wiederverwendbare Klassen, die im HTML-Element als „class“ hinterlegt und per ." angesprochen werden. Beispiel: class="Klassenname" wird mit .Klassenname selektiert.

• IDs: Frei vergebbare und eindeutige IDs, die im HTML-Element als „id“ hinterlegt und per „#“ angesprochen werden. Beispiel: id="ID123" wird mit #ID123 selektiert.

Zudem gibt es noch den Universalselektor „*“, welcher alle Elemente der HTML-Seite auswählt. Ferner gibt es Pseudoklassen (:hover, ::active) und Pseudoelemente (::before, ::after), die im eigentlichen Markup nicht vorkommen, aber unter bestimmten Umständen im Browser gerendert werden.

Die Cascading-Regel

HTML-Elemente sind häufig ineinander verschachtelt. So enthält z. B. der Body eines HTML-Dokuments alle Elemente, die auf der Webseite angezeigt werden sollen. Durch diese Verschachtelung können Konflikte entstehen, denn untergeordnete HTML-Elemente erben bestimmte Eigenschaften ihrer übergeordneten Elemente. Dazu zählen auch Stile. Es entsteht Unklarheit darüber, welche Regel Gültigkeit hat, wenn mehrere Regeln aufeinandertreffen.

CSS löst dieses Problem durch die Cascading-Regel. Sie besagt, dass die Anweisung Priorität hat, die dem jeweiligen Element am nächsten ist. Der Selektor, der das Element am genauesten beschreibt, setzt sich durch. In komplexen Fällen können Selektoren in CSS deshalb sehr spezifisch werden.

Ein Beispiel: Per „a“ werden alle Links der gesamten Webseite angesprochen, während „#navigation .info a:last-of-type“ nur den letzten Link innerhalb des Elements mit der Klasse info im Element mit der ID navigation anspricht. Dadurch wird in diesem Beispiel eine allgemeine Regel für alle Links festgelegt und gleichzeitig ein abweichender Stil für ganz bestimmte Links ermöglicht.

Auch der Ort, an dem der Stil definiert wird, spielt eine Rolle für die Cascading-Regel. Stile können in einem externen Dokument, direkt im Header eines HTML-Dokuments oder innerhalb des jeweiligen HTML-Elements als Inline-Style implementiert werden. Die Priorität zwischen verschiedenen Anweisungen entscheidet sich durch die Reihenfolge, in der die Elemente vorliegen.

Wird ein Stil im Header definiert und danach ein Stylesheet eingebunden, setzt sich im Konfliktfall das Stylesheet durch. Am nächsten ist einem Element immer der Inline-Style, weil er sich unmittelbar am jeweiligen HTML-Element befindet. Dieser Stil setzt sich über alle anderen Regeln hinweg und kann nur mit dem Schlüsselwort !important überschrieben werden. Deshalb sollten CSS-Regeln so allgemein wie möglich bleiben und nur bei Bedarf spezifisch werden.

Deklarationsblock

Jedes Element einer Webseite hat verschiedene Attribute, mit denen es beschrieben und beeinflusst werden kann. Dazu gehören Eigenschaften wie Größe, Farbe, Umrandung, Abstand zu anderen Elementen, Ausrichtung. Im Deklarationsblock können die Standardwerte eines Elements überschrieben und detailliert gestaltet werden.

Welche Attribute beeinflusst werden können, hängt vom selektierten Element ab. Einer horizontalen Linie (hr) muss z. B. keine Schriftart oder Schriftgröße zugewiesen werden, weil dieses Element keine schriftlichen Informationen darstellt. Der Deklarationsblock kann aus beliebig vielen Anweisungen bestehen. Eine Anweisung ist ein Paar aus Schlüsselwort und Wert. Die Schlüsselworte sind fest vorgegeben, z. B. font-size oder border. Die Werte müssen einem festen Format folgen, das vom jeweiligen Schlüsselwort abhängt.

Fazit

CSS ermöglicht Entwicklern, die Darstellung von HTML-Elementen bis ins Detail zu steuern, um Websites benutzerfreundlicher und dem jeweiligen Verwendungszweck angemessen zu gestalten. Die Cascading-Regel erlaubt feine Kontrolle über die Gesaltung und macht auch komplizierte oder kreative Layouts möglich. Manche rein textbasierten Inhalte kommen auch heute noch relativ gut ohne CSS aus, trotzdem hat sich die Technologie als der Standard für für die optische Aufbereitung komplexer Inhalte auf Webseiten etabliert.

(ID:49884785)