CSS ist die Abkürzung für “Cascading Style Sheet“ und bedeutet auf Deutsch in etwa “abgestufte Designvorlagen“. Dabei handelt es sich um eine einfache Stylesheet-Sprache, die es erlaubt, das Aussehen für bestimmte Elemente innerhalb elektronischer Dokumente wie beispielsweise einer Webseite festzulegen.
Die Geschichte von CSS kurz gefasst
Die Anfänge der Stylesheet-Sprache reicht zurück bis etwa in das Jahr 1993. Mit der Einführung neuer Browser (z.B. Mosaik Browser) wurde deutlich, dass Webdesigner nur wenige Möglichkeiten hatten, das Design einer Website entsprechend ihren Vorstellungen zu gestalten. Im Oktober 1994 wurde eine als “Cascading HTML Style Sheets“ (CHSS) bezeichnete frühe CSS Version von Håkon Wium Lie, einem CERN-Mitarbeiter, vorgestellt. Zusammen mit Bert BOS, einem ebenfalls am CERN tätigen Computerwissenschaftler, entwickelte Håkon Wium Lie schließlich die erste Version. 1996 wurde CSS1 veröffentlicht und erstmals vom W3C, dem World Wide Web Consortium, empfohlen. 2 Jahre später, im Mai 1998, folgte CSS2. Mit der Einführung der zweiten Version wurden zahlreiche neue Elemente wie beispielsweise medienspezifische Stylesheets implementiert.
Auf Empfehlung des W3C wurde 2011 CSS2.1 veröffentlicht, dem 2016 eine überarbeitete Version mit der Bezeichnung CSS2.2 folgte. CSS3 ist die aktuelle Version. Die wohl wichtigste mit CSS3 eingeführte Neuerung sind die sogenannten media-queries, mit denen Webseiten für die Darstellung auf unterschiedlichen Endgeräten optimiert werden können. Eine Version 4 von CSSwird es laut W3C nicht geben. Vielmehr sollen die einzelnen Module von CSS3 unabhängig voneinander weiterentwickelt werden. Seit der ersten Version hat sich an der Syntax
der CSS Regeln nichts grundlegend geändert.
Aufbau einer CSS-Regel
Eine Cascading Style Sheet Regel hat den folgenden grundsätzlichen Aufbau
Selektor {
Eigenschaft: Eigenschaftswert;
}
Eigenschaft und Eigenschaftswert werden zusammengenommen als Deklaration bezeichnet.
Ein Beispiel:
h1 {
color: blue;
}
In diesem Beispiel ist h1 der Selektor, mit dem sich bestimmen lässt, dass die folgende Deklaration für h1 Überschriften gültig ist. Mithilfe der Deklaration wird festgelegt, dass die Eigenschaft Farbe (color) der h1 Überschriften im Dokument den Eigenschaftswert Blau (blue) erhalten soll. Eigenschaft und Eigenschaftswert müssen durch einen Doppelpunkt voneinander getrennt werden. Die Deklaration wird durch ein Semikolon (;) abgeschlossen und in geschweifte Klammern gesetzt. Sollen mehrere Eigenschaften eines Elements formatiert werden, werden die Dekorationen innerhalb eines Regelsatzes jeweils mit einem Semikolon voneinander getrennt. Zum Beispiel
h1 {
color: red;
font-size: 60px;
text–align: center;
}
In Cascading Style Sheets kommt den Selektoren eine besondere Bedeutung zu.
CSS Selektoren – Typen und Funktion
Damit in einem HTML Dokument bestimmte Eigenschaften auf ein Element einer Website angewendet werden können, muss zunächst definiert werden, welches Element angesprochen werden soll. Lesen Sie hier alles über HTML.
In CSS übernehmen Selektoren diese Funktion. Sie werden als ein Teil einer CSS Regel eingefügt. Cascading Style Sheet Selektoren sind
- einfache Selektoren
- Pseudoklassen
- Kombinatoren
- Pseudoelemente
Einfache Selektoren
Einfache Selektoren sind der Universalselektor * (Sternchen oder Asterisk) und der Typ-Selektor (elemet). Falls erforderlich, können einfache Selektoren durch einen ID-Selektor sowie beliebig vielen Pseudoklassen oder Attributselektoren in einer beliebigen Reihenfolge, aber ohne Trennung durch ein Leerzeichen, erweitert werden. Jede dieser Komponenten muss eine Übereinstimmung ergeben, damit mit einem einfachen Selektor ein Element angesprochen werden kann.
Pseudoklassen
Pseudoklassen sind Schlüsselbegriff, die hinter einen Selektor angegeben werden, um den Zustand eines Elements auf einer Webseite abzufragen. Zu den Pseudoklassen zählen strukturelle Pseudoklassen und dynamische Pseudoklassen. Mit strukturellen Pseudoklassen kann eine Webseite in Bezug die Struktur des Inhalts und anderer Faktoren wie eingegebene Formulardaten, die Position des Mauszeigers oder des Browserverlaufs gestaltet werden. Pseudoklassen beginnen immer mit einem Doppelpunkt (:) gefolgt von einem Schlüsselwort. Das Schlüsselwort definiert die Eigenschaft der Pseudoklasse. Zu den strukturellen Pseudoklassen zählen unter anderem:
- :root
- :empty
- :first-child
- :last-child
- :first-of-type
- :last-of-type
- :only-of-type
Eine eigene Gruppe bilden dynamische Pseudoklassen. Mit dynamischen Pseudoklassen kann das Aussehen und Verhalten von Links innerhalb einer Webseite gesteuert werden. Beispiele für dynamische CSS Pseudoklassen sind
- :link
- :visited
- :active
- :hover
- :focus
Pseudoklassen können mit Einfachselektoren kombiniert werden. Wenn sie eigenständig in das Cascading Style Sheeteingefügt werden, haben sie Auswirkungen auf das komplette HTML Dokument.
Kombinatoren
Mit Kombinatoren können zwei Selektoren miteinander verkettet werden. Der erste Selektor definiert bei der Verwendung von Kombinatoren eine Bedingung. Der zweite Selektor ist das Ziel, das angesprochen werden soll, wenn die mit dem ersten Selektor definierte Bedingung erfüllt wird. Mit dem Kombinator wird zudem angegeben, in welchem Verhältnis die beiden Selektoren vor und nach dem Kombinator zueinanderstehen müssen. Dabei ist zu beachten, dass zwischen zwei Selektorenimmer nur ein Kombinator verwendet werden kann. Es ist jedoch möglich, die Verkettung durch einen weiteren Kombinatorzu verlängern und einen weiteren Selektor anzuhängen.
- Kombinatoren in CSS sind
- Kindkombinator: e > f
- Nachfahrenkombinator: e f
- Nachbarkombinator: e + f
- The lobotomized owl selector: * + *
- Geschwisterkombinator: e ~ f
Pseudoelemente
Pseudoelemente finden Verwendung, um bei der Wiedergabe einer Webseite Abschnitte zu erzeugen, die in Elementebaum eigentlich nicht vorhanden sind. Diese Abschnitte können mit Inhalt gefüllt und formatiert sein. Diese Selektoren können nur allein stehen oder am Ende verketteter Selektoren eingefügt werden. Allgemein gilt es als sinnvoll, diese Selektoren an einen einfachen Selektor anzuhängen, um die Auswirkung sicher auf das angesprochene Element zu begrenzen. Seit CSS3 notiert man Pseudoelemente mit einem vorangestellten doppelten Doppelpunkt (::). Cascading Style Sheet kennt die folgenden Pseudoelemente
- ::before, ::after
- ::first-letter
- ::first-line
- ::backdrop
- ::selection
- ::placeholder
Wie werden die CSS Vorgaben an ein Dokument übergeben?
Es gibt drei Möglichkeiten, die Cascading Style Sheet Formatvorgaben in ein HTML Dokument einzufügen. Möglich sind
- Externe Dateien
- Internes CSS
- Inline-CSS
Externe Cascading Style Sheet Dateien
Externe Stile definiert man im < link> -Element im < head> Bereich einer HTML-Seite:
< head>
< link rel = “stylesheet” type = “text / css” href = “styles.css“>
< / head>
Ein externes Cascading Style Sheet lässt sich mit einem beliebigen Texteditor erstellen und als .css Datei speichern. Dabei muss man beachten, dass die Datei keine HTML-Tags enthalten darf.
Internes CSS
Ein internes Stylesheet findet häufig Verwendung, wenn eine einzelne HTML-Seite einen eigenen Stil erhalten soll. Interne Stylesheets definiert man im < style> -Element im Kopfbereich einer Webseite. Zum Beispiel:
< head>
< style>
body {
background-color: yellow;
}
< / style>
< / head>
Inline-CSS
Will man einzelne Elemente einer Webseite auf besondere Weise formatieren, kann dies mit Hilfe von Inline-CSS geschehen. Hierbei wird das Stilattribut dem entsprechenden Element hinzugefügt. Zum Beispiel
< h1 style = “color: blue; align: center;”> Dies ist eine Überschrift < / h1>
Die Vorteile von CSS
Durch die Trennung von Inhalt und Gestaltung gestalten sich HTML-Seiten deutlich kleiner und für Programmierer übersichtlicher. Die reduzierte Datenmenge verkürzt die Ladezeit von Webseiten insbesondere auf mobilen Geräten wie Tablets oder Smartphones. Zudem werden spätere Änderungen erheblich erleichtert. Cascading Style Sheets bieten Programmierern und Webdesignern mehr Gestaltungsmöglichkeiten als reines HTML und ermöglichen ohne großen Aufwand die optimale Anpassung von Webseiten an unterschiedliche Endgeräte.