Einführung

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, welche zur Formatierung von HTML und XML eingesetzt werden kann. Der Haupteinsatz findet sich hierbei jedoch in Verbindung mit HTML.

CSS ermöglicht neben „einfachen Formatierungen“ wie Text- oder Layout-Formatierungen auch Transformationen, Effekte und sogenannte Media Queries, mit welchen es möglich ist, unterschiedliche Formatierungen auf verschiedene Endgeräte anzuwenden.

CSS-Dateien werden unverändert an den Browser gesendet und können daher von jedem gelesen werden. Da CSS-Skripte reine Text-Dateien sind und vom Browser interpretiert und verarbeitet werden, benötigen wir um CSS-Dateien zu erstellen und zu bearbeiten lediglich einen Text-Editor. Natürlich empfehlen wir Ihnen einen Editor mit Syntax-Highlighting zu verwenden.

Geschichte

CSS wurde entworfen, um eine Trennung zwischen Inhalt und Design herzustellen. In älteren HTML-Versionen gab es unter anderem das font-Element, mit welchem Schriftfarbe, Schriftgröße und Schriftart festgelegt werden konnte. Des Weiteren wurden früher Tabellen verwendet, um Layouts mittels CSS zu erstellen. Ein solches Schema widerspricht dem MVC-Konzept (Model View Controller).

Die ersten Ausarbeitungen und Entwicklungen des CSS-Vorgängers CHSS (Cascading HTML Style Sheet) fanden bereits in den Jahren 1994 statt. Ende 1996 wurde die erste Spezifikation von CSS namens CSS Level 1 vom W3C (World Wide Web Consortium) veröffentlicht.

Die 2. Version von CSS (offiziell CSS Level 2) wurde im Mai 1998 veröffentlicht. Mitte 2011 wurde CSS Level 2 Revision 1 veröffentlicht, welche seit 2014 von fast allen Webbrowsern so gut wie vollständig unterstützt wird.

Parallel zur Entwicklung von CSS2 wurde im Jahre 2000 mit der Entwicklung von CSS3 begonnen. CSS3 enthält neben der Weiterentwicklung von CSS2-Bestandteilen auch neue Funktionen wie z. B. Transformationen, Schatten, Transparenz und Media Queries.

Mittels CSS wird das MVC-Konzept wieder hergestellt bzw. aufrechterhalten. So könnte man am Beispiel von Webseiten sagen, dass der HTML-Code das Modell (M = Model) und der CSS-Code die Darstellung (V = View) ist.

Syntax

Der Syntax von CSS ist ziemlich einfach aufgebaut. Als erstes notieren wir immer einen oder mehrere Selektoren. Selektoren erlauben (wie der Name schon sagt) das Selektieren von HTML-Elementen. Dadurch können wir also mittels CSS auf HTML-Dokumente „zugreifen“. CSS bietet verschiedene Arten von Selektoren: Element-Selektoren, Klassen, IDs und Attribut-Selektoren. Auf diese werden wir im nächsten Thema genauer eingehen. Nach dem Selektor folgt immer ein Block, welcher in geschweifte Klammern gesetzt werden muss. Hier ein schematischer Aufbau:

selektor
{
    
}

Um z. B. einen „Block“ für mehrere Elemente oder einen „Block“ nur für Elemente, die einem anderen Element untergeordnet sind anzuwenden, gibt es sogenannte Kombinatoren. Diese werden wir ebenfalls im nächsten Thema vorstellen.

Innerhalb des Blocks können nur sogenannte Eigenschaften platziert werden. Eigenschaften ermöglichen das Festlegen verschiedener Einstellungen. Diese Einstellung kann sich auf Schrift, Layout und anderes auswirken. Die Liste der verfügbaren Eigenschaften ist lang. Die wichtigsten und meist genutzten Eigenschaften werden Sie innerhalb dieses CSS-Kurses kennenlernen. Nach dem Namen der Eigenschaft muss ein Doppelpunkt : notiert werden. Im Anschluss wird der dazugehörige Wert bzw. die dazugehörigen Werte notiert. Um die Eigenschaft abzuschließen, müssen wir noch am Ende ein Semikolon ; notieren. Hier nochmals ein weiterer schemenhafter CSS-Code:

selektor
{
    eigenschaft1: wert1;
    eigenschaft2: wert2;
    eigenschaft3: wert3;
}

Die in den zwei obigen Codes enthaltenen Leerzeichen und Zeilenumbrüche sind nur „Kosmetik“. Sie dienen also nur zur Verbesserung der Lesbarkeit. Da Sie mit Ihren CSS-Dateien immer wieder arbeiten werden, sollten Sie hier (sowie im HTML-Code auch) auf eine übersichtliche Darstellung und einen guten Aufbau achten.

Zur besseren Lesbarkeit dienen auch Kommentare. Kommentare beginnen in CSS mit /* und enden mit */. Kommentare können sich dabei über mehrere Zeilen erstrecken. Genutzt werden Kommentare rein zu Dokumentations- und Testzwecken. Bitte bedenken Sie, dass alle Personen die Zugang zu Ihrer Website haben, auch den Quelltext und somit auch die Kommentare Ihrer CSS-Dateien lesen können.

/* einzeiliger Kommentar */
/* ein mehrzeiliger
   Komentar */

Farben

Bei diversen Eigenschaften von CSS ist es notwendig, eine Farbe anzugeben. Für die Angabe einer Farbe gibt es 6 verschiedene Möglichkeiten. Zum einen ist die Angabe eines Farbnamens in englischer Sprache möglich. Die CSS-Spezifikation enthält über 100 vordefinierte Farbnamen. Hierzu zählen gängige Namen wie red, green, lime, blue, orange, white, black und viele mehr. Die besseren Editoren (z. B. Adobe Brackets) enthalten diese Farbliste, weshalb diese dort ganz einfach mittels Autovervollständigung abgerufen werden können.

red

Um Farben im RGB-Farbraum anzugeben, gibt es das Schlüsselwort rgb. Hinter diesem muss ein rundes Klammernpaar notiert werden. Innerhalb der Klammer werden die drei Werte des Farbraums (Rotanteil, Grünanteil, Blauanteil) angegeben. Die Werte sind dabei Dezimalzahlen zwischen 0 und 255. Eine Einheit wird hier nicht angegeben.

rgb(107, 234, 45)

Wollen wir zusätzlich zu den Farbanteilen noch die Deckkraft angeben, so verwenden wir das Schlüsselwort rgba. Hier muss dann noch zusätzlich ein 4. Wert angegeben, welcher zwischen 0.0 und 1.0 liegen muss. 1.0 bedeutet dabei die volle Deckkraft. Wird das Schlüsselwort rgb verwendet, so besitzt die Farbe immer die volle Deckkraft.

rgba(107, 234, 45, 0.7)

An Stelle der Notation mit dem rgb-Schlüsselwort kann der Farbwert auch hexadezimal angegeben werden. Das dafür vorgesehene Format ist #RRGGBB. Da die einzelnen Bestandteile eines RGB-Wertes zwischen 0 und 255 in Dezimalangabe liegen, befindet sich der Wertebereich in hexadezimaler Schreibweise zwischen 00 und FF.

#6BEA2D

Viele Designer arbeiten nicht mit dem RGB-Farbraum, sondern mit dem HSL-Farbraum, da man sich die Farben besser vorstellen kann. Der HSL-Farbraum setzt sich aus dem Farbwert (Hue), der Sättigung (Saturation) und der Helligkeit (Lightness) zusammen. Der Farbwert wird in Grad angegeben (ohne Einheit). Die Sättigung und die Helligkeit werden in Prozent (inkl. Prozentzeichen) angegeben. Um HSL-Werte in CSS zu notieren, benötigen wir das Schlüsselwort hsl, ein rundes Klammernpaar und die drei Werte, welche durch Komma getrennt werden.

hsl(207, 82%, 35%)

Auch HSL-Farbangaben können noch um die Deckkraft erweitert werden. Hierzu benötigen wir das Schlüsselwort hsla an Stelle von hsl. Auch hier wird die Deckkraft als 4. Parameter mit einem Wert zwischen 0.0 und 1.0 angegeben.

hsla(207, 82%, 35%, 0.4)

Einheiten

Für einige CSS-Eigenschaften (Positionierung, Rahmen, Größe uvm.) muss zusätzlich zu einer Zahl eine Einheit angegeben werden, mit welcher spezifiziert wird, in welchem „Format“ die Zahl angegeben wurde. In CSS wird zwischen absoluten und relativen Einheiten unterschieden. Alle Zahlen können dabei Ganzzahlen, aber auch Zahlen mit Nachkommastellen sein. Bei einigen Eigenschaften (z. B. bei der Positionierung von Elementen) ist es auch möglich, negative Zahlen zu notieren. Hierfür muss direkt vor der Zahl ein Minuszeichen / Bindestrich notiert werden.

Bei absoluten Einheiten wird sozusagen sichergestellt, dass die Darstellung auf allen Endgeräten gleich ist. Als Einheiten stehen uns Millimeter mm, Zentimeter cm, Inch in, Pixel px, Points pt und Pica pc zur Verfügung.

100mm

10cm

30in

16px

24pt

8pc

Einige Personen behaupten, dass Pixel keine absolute Einheit ist. Dies liegt daran, dass Pixel je nach Größe des Bildpunktes unterschiedlich groß sein können. Trotzdem hat es sich durchgesetzt, dass Pixel als absolute Einheit gilt.

Relative Einheiten beziehen sich auf bestimmte andere Angaben (z. B. das übergeordnete Element). Die Benutzung von relativen Einheiten hat in den letzten Jahren zugenommen. Dies liegt auch daran, dass relative Einheiten für responsives Webdesign praktischer sind. Dennoch werden für Schriftgrößen und ähnliches weiterhin gerne absolute Einheiten verwendet. Als relative Einheiten stehen uns Prozent %, em und rem zur Verfügung. Die em-Einheit gibt den Faktor zur Multiplikation mit der Schriftgröße an. Verwendet wird die Einheit oftmals für die Zeilenhöhe. Die rem-Einheit ist fast identisch mit der em-Einheit. Der einzige Unterschied ist, dass sich die Multiplikation nicht auf die Schriftgröße des aktuellen Elements, sondern auf die Schriftgröße des Wurzel-Elements (html-Element) bezieht.

60%

1.3em

1.6rem

Übrigens: Wenn Sie einer Eigenschaft den Zahlenwert 0 zuweisen möchten, ist es gängige Praxis, die Einheit wegzulassen. Laut CSS-Spezifikation ist diese Vereinfachung erlaubt.

Übrigens: Im Kapitel Weiterführendes finden Sie einen Umrechner für die absoluten Maßeinheiten.

Platzierung

Nun haben wir bereits grundlegendes über unseren späteren CSS-Code gelernt. Doch wo wird der Code eigentlich platziert? Hierfür gibt es insgesamt 3 Möglichkeiten, wovon nicht immer alle für jeden Einsatzzweck geeignet sind.

Die gängigste Variante ist, den CSS-Code in einer separaten Datei zu platzieren. Die Dateien verfügen dabei standardmäßig über die Endung .css. Nun benötigen wir noch einen Link in unserer HTML-Datei, um die HTML-Datei mit der CSS-Datei zu verbinden. Hierfür benötigen wir das link-Element mit dem href- und type-Attribut. Das href-Attribut gibt die URL zur Datei an. Das type-Attribut enthält den MIME-Typ, welcher bei CSS text/css ist. Für größere Projekte kann es auch nützlich sein, mehrere CSS-Dateien zu erstellen. Wollen wir mehrere Dateien in eine HTML-Seite einbinden, müssen wir einfach das link-Element mehrmals notieren.

<link rel="stylesheet" href="layout.css" type="text/css" />

Und so könnte der schematische Inhalt der CSS-Datei layout.css aussehen:

selektor
{
    eigenschaft1: wert1;
    eigenschaft2: wert2;
    eigenschaft3: wert3;
}

Der Vorteil der obigen Methode ist, dass wir eine CSS-Datei für mehrere HTML-Seiten verwenden können. Wollen wir nun das Design unserer Website anpassen (z. B. Schriftart, Farbe etc.), müssen wir nur die CSS-Datei editieren.

Es kann aber auch sein, dass es bestimmte CSS-Regeln gibt, welche nur für eine spezielle HTML-Seite gelten soll. In einem solchen Fall müssen wir nicht unbedingt eine extra CSS-Datei anlegen, sondern können den CSS-Code im HTML-Code notieren. Der CSS-Code muss hierfür innerhalb des style-Elements angegeben werden. Das style-Element muss über das style-Attribut verfügen (wie das link-Attribut) und muss innerhalb des Head-Bereichs notiert sein.

<style type="text/css">
selektor
{
    eigenschaft1: wert1;
    eigenschaft2: wert2;
    eigenschaft3: wert3;
}
</style>

Um einem einzelnen HTML-Element eine oder mehrere CSS-Eigenschaften zuzuweisen, können wir innerhalb aller darstellbaren HTML-Elemente das style-Attribut verwenden. Als Wert werden CSS-Eigenschaften und deren Werte notiert. Auch hier gilt das bekannte Format mit Doppelpunkt zwischen Eigenschaft und Wert und Semikolon am Ende einer Eigenschaft. Es fällt also lediglich der Selektor und die geschweiften Klammern weg.

<p style="eigenschaft1: wert1; eigenschaft2: wert2; eigenschaft3: wert3;">...</p>

Alternativ dazu ist es möglich, ein einzelnes Element mittels ID per CSS zu selektieren. Dazu im nächsten Thema mehr.

Beispiel

Nachdem wir bisher immer nur mit schematischem Code gearbeitet haben, wollen wir uns nun den ersten fertigen Code anschauen. Der folgende CSS-Code selektiert alle h1-Elemente und weist diesen eine blaue (englischer Farbenname blue) Schriftfarbe (Eigenschaft color) zu.

h1
{
	color: blue;
}