Was sind Cascading Style Sheets?

Was sind Cascading Style Sheets?
© burntime555 – Fotolia.com

Webseiten basieren auf HTML („Hypertext Markup Language“), einer Auszeichnungssprache, durch die die Inhalte und Struktur einer Webseite festgelegt werden. (Hier erfahren Sie mehr zu HTML) In den Anfängen des World Wide Web wurde das Design einer Seite auch im HTML-Quellcode festgelegt. Dies hatte einen entscheidenden Nachteil: Bei Layout-Anpassungen mussten stets alle Seiten des Internetauftritts angepasst werden. Wer ein Content-Management-System nutzt, kann diese Unannehmlichkeiten bis zu einem bestimmten Punkt umgehen. Am komfortabelsten ist es jedoch, wenn Design und Layout vom HTML-Code getrennt festgelegt werden – mit Hilfe von CSS.

CSS: So funktioniert´s

Die CSS-Anweisungen werden idealerweise in einer separaten Datei hinterlegt. Darin kann beispielsweise festgelegt werden, in welcher Schrift und Farbe Überschriften und Text erscheinen, wie Text und Bilder angeordnet werden sollen usw. Auf jeder Seite des Internetauftritts muss im HTML-Quelltext lediglich ein Verweis auf diese CSS-Datei eingefügt werden und Design und Layout werden automatisch angewendet.
 

Beispiel für einen Verweis auf eine CSS-Datei:
<link rel="stylesheet" type="text/css" href="/default.css" />

Beispiel für eine CSS-Anweisung zur Formatierung der Hauptüberschrift:
h1 {
    font-size: 200%;
    font-weight: bold;
}

Große Veränderungen bei geringem Aufwand

Der entscheidende Vorteil dieser Vorgehensweise: Für Anpassungen an Design und Layout muss – abgesehen von grafischen Elementen – lediglich die CSS-Datei angepasst werden. Die Änderung wirkt sich dann auf die gesamte Website aus – zumindest auf die Seiten, die einen Verweis auf die entsprechende CSS-Datei enthalten.

Schauen Sie sich auch das Video auf unserem YouTube-Kanal Fairrank TV zu diesem Thema an:



Jochen Moschko

 
Jochen Moschko
SEO & QS-Manager
Jochen Moschko arbeitet in den Bereichen Suchmaschinenoptimierung und Qualitätssicherung bei der FAIRRANK GmbH.