CSS was ist das eigentlich?

Haben Sie sich auch schon die Frage gestellt “CSS was ist das eigentlich”? Nachfolgend beantworte ich diese Frage in aller Kürze.

Allgemeines

CSS ist eine Stilsprache für strukturierte Dokumente, die insbesondere ergänzend für HTML-Dokumente zur Formatierung eingesetzt wird. CSS wurde 1994 von Håkon Wium Lie erfunden. 1996 wurde es unter dem Namen CSS Level 1 Recommendation vom W3C publiziert und damit zum De-facto-Standards erhoben. Die aktuelle Version ist CSS Level 2 Revision 1. Der Nachfolger, CSS Level 3 existiert im Moment nur als Arbeitsentwurf, ein Datum für die finale Veröffentlichung ist unbekannt. Dennoch unterstützen aktuelle Browser zahlreiche CSS3-Funktionen, weshalb Webentwickler bereits heute Teile von CSS3 einsetzen können.

CSS ist eine Formatierungssprache

Cascading Style Sheets werden vor allem benutzt, um semantisch ausgezeichnete HTML-Elemente zu formatieren. Anders ausgedrückt werden die im HTML-Dokument erstellten Elemente gestaltet und positioniert. CSS kann man z. B. zum Festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern und zur Positionierung benutzen. Außerdem lassen sich neben dem Ausgabemedium Monitor auch andere Medien, wie z. B. Drucker oder Handy-Displays ansprechen. Auf diesem Wege kann den medienspezifischen Besonderheiten (Hyperlinks machen beim Ausdruck keinen Sinn, Handy-Display ist viel kleiner) berücksichtigt werden.

Verknüpfung zum HTML-Element

Nehmen wir an, der Autor hat im HTML-Dokument eine Überschrift als erste Überschriftenebene ausgezeichnet:

1
<h1>Überschrift</h1>

Nun möchte er erreichen, dass die Überschrift im Browser in rot angezeigt wird. Der sinnvollste Weg ist nun, eine externe CSS-Datei mit folgendem Inhalt zu erstellen:

1
2
3
{
color: red;
}

Erklärung: h1 selektiert, auf welches HTML-Element sich die nachfolgende Regel bezieht. Innerhalb der geschweiften Klammer steht die eigentliche CSS-Regel. Der erste Teil benennt die gestaltende Eigenschaft (hier die Farbe), gefolgt von einem Doppelpunkt. Der zweite Teil bestimmt den Wert, den die Eigenschaft annehmen soll (hier die Farbe rot). Hinter jedem Eigenschaft-Wert-Paar steht ein Semikolon.

Die CSS-Datei mit der oben stehenden Regel ist bis jetzt eine autarke Datei. Da im Browser immer die HTML-Datei aufrufen wird, müssen Sie innerhalb der HTML-Datei eine Verbindung zur CSS-Datei definieren. Das machen Sie im head-Abschnitt mithilfe des -Tags:

1
2
3
<head>
<link rel=“stylesheet” type=text/css” href=”dateiname.css” />
</head>

Neben der soeben praktizierten Auslagerung in eine externe Datei gibt es noch zwei weitere Möglichkeiten, Stil-Anweisungen einzubinden: entweder im Head-Bereich des HTML-Dokuments oder direkt im HTML-Tag. Auf ihre Anwendung sollte allerdings möglichst verzichtet werden, da sie die Vorzüge der Trennung von Inhalt und Design in unterschiedlichen Dateien zunichte machen. Deshalb sollten sie allenfalls innerhalb der Entwicklungsphase zum Testen bestimmter Werte verwendet werden.

Möchten Sie mehr wissen?

Soweit eine ganz kurze Zusammenfassung zum Thema: CSS, was ist das eigentlich? Tiefer gehende Informationen und Workshops finden Sie in meinem CSS-Lehrgang für Anfänger!