Webdesign wird heutzutage mit HTML und CSS realisiert. Diese beiden Sprachen reichen aus, um eine Webseite in ihren Grundzügen mit dem nötigen Code zu versehen, damit sie funktioniert und hochgeladen werden kann. Die volle Bezeichnung lautet „Cascading Style Sheets“ und trifft optimal, wie die Sprache funktioniert. Während HTML das Skelett einer Webseite ist und vorgibt, was jede einzelne Seite funktionell tun soll, ist CSS das Design-Grundgerüst und codiert, wie die verschiedenen HTML-Seiten aussehen sollen.

Was ist CSS?

CSS - Cascading Style SheetsDie volle Bezeichnung „Cascading Style Sheets“ beschreibt, wie die Programmiersprache funktioniert. Ein Style Sheet ist ein kompletter CSS-Code für eine Webseite und enthält Informationen dazu, wie die darin vorkommenden HTML-Elemente aussehen sollen und welche stilistischen, optischen Merkmale sie aufweisen. „Cascading“ sind sie, da sie übereinander liegen; es gibt globale Einstellungen, die über grosse Bereiche der Webseite entscheiden, und auch kleinschrittige Einstellungen, die über tief im HTML-Code verborgene strukturelle Elemente bestimmen. Auf diese Weise könnte beispielsweise für die Listenpunkte, die unter einer H3-Überschrift sitzen, ein anderes Aussehen codiert werden als für die Listenpunkte unter den H1- oder H2-Überschriften. Mit CSS kann man auf diese Weise jedem Element einer Webseite eine individuelle, spezifische Optik verleihen, die nur sie hat. Im globalen Bereich dagegen ordnet CSS einzelne Grafik-Blöcke einer Stelle in der Webseite zu, sodass aus einzelnen Grafik-Teilen nach und nach eine komplette Webseite entsteht.

Wie funktioniert CSS?

Die „Cascading Style Sheets“ für eine Webseite werden einmal programmiert, die Datei enthält damit die Befehle für die komplette Webseite. Eine fertige CSS-Datei kann man im Head-Bereich der Webseite verlinken, anschliessend wird sie angewendet. Die CSS-Datei muss alle optischen Eigenschaften einer Webseite enthalten – es reicht also nicht aus, die CSS-Datei lediglich für eine Seite zu schreiben. Damit wird sie zwar auch Befehle enthalten, die auf manchen Seiten nicht vorkommen, doch so erspart man sich den Aufwand, für mehrere Seiten eigenen CSS-Code schreiben zu müssen.

Cascading Style SheetCSS definiert zunächst das HTML-Element, um das es geht. Dann folgen die Regeln, die auf es wirken sollen. Was einfach klingt, kann je nach Befehlen und Position der HTML-Elemente, um die es geht, sehr viel komplizierter werden. HTML-Elemente, die tief im Code liegen und zwischen mehreren Tags sitzen, müssen auch entsprechend codiert werden. Man geht dabei vom äussersten zum innersten HTML-Tag vor und wendet anschliessend die Regeln darauf an. Bei der grundlegenden Erstellung einer Webseite funktioniert CSS nach einem Box-Modell. Die Webseite wird dabei stilistisch in Boxen unterteilt und diese werden anschliessend mit den Eigenschaften border, margin und padding an die richtige Stelle gerückt.

Hat mensch einmal das Box-Modell hinter CSS verstanden, fällt der Umgang damit schon wesentlich leichter und man kann eine Webseite komplett eigenständig in Szene setzen. CSS wird idealerweise nach dem HTML-Code und bei bereits bestehendem Webdesign in der reinen Bildform geschrieben, da man dann alle Informationen darüber hat, was die Webseite können soll und welche HTML-Tags in ihr vorkommen werden.

Wer jetzt noch etwas mehr über CSS wissen möchte, dem rate ich mal den nachfolgendem Workshop zu besuchen: CSS Anleitung für Einsteiger