CSS für Webseiten: die Gestaltungssprache

CSS ist die Sprache, mit der das Aussehen einer Webseite festgelegt wird. Die Abkürzung steht für Cascading Style Sheets, also gestufte Gestaltungsvorlagen. Während HTML bestimmt, was auf einer Seite steht, bestimmt CSS, wie es aussieht: welche Farbe der Text hat, wie groß die Schrift ist, wie viel Abstand zwischen den Elementen liegt und wie das Ganze angeordnet wird.

Was ist CSS? Die Gestaltungssprache fÃ¼r Laien: Eine graue unformatierte Webseite verwandelt sich per Pfeil in ein farbiges, gestaltetes Layout, danebe

Warum HTML und CSS für Webseiten getrennt sind

Am Anfang fragt man sich, warum es zwei Sprachen braucht. Der Grund ist die Trennung von Inhalt und Gestaltung, und die hat handfeste Vorteile im Alltag.

Steht das Aussehen in einer eigenen Datei, kannst du das Design der ganzen Webseite an einer Stelle ändern. Legst du dort fest, dass alle Überschriften dunkelblau sind, gilt das sofort für jede Seite. Ohne diese Trennung müsstest du die Farbe in jeder einzelnen Datei von Hand anpassen. Bei einer Galerie mit vielen Seiten wäre das mühsam und fehleranfällig. So bleibt der Inhalt schlank und die Gestaltung an einem Ort gebündelt. Willst du der Seite ein neues Aussehen geben, tauschst du im Idealfall nur die Gestaltungsdatei aus, ohne einen einzigen Text zu berühren.

Wie eine Regel in CSS für Webseiten aufgebaut ist

CSS besteht aus Regeln, und jede Regel ist gleich aufgebaut. Sie nennt zuerst, worauf sie wirkt, und dann, was geändert werden soll.

Eine Regel beginnt mit einem Selektor, der angibt, welche Elemente gemeint sind, zum Beispiel alle Absätze. Danach folgen in geschweiften Klammern die Eigenschaften. Eine Eigenschaft besteht aus einem Namen und einem Wert, getrennt durch einen Doppelpunkt. So sagst du etwa, dass die Schriftfarbe rot sein soll. Mehrere Eigenschaften schreibst du untereinander, jede mit einem Semikolon am Ende. Der Browser liest diese Regeln und wendet sie auf die passenden Stellen im HTML an. Findet er mehrere Regeln für dasselbe Element, entscheidet die Reihenfolge, welche gilt. Daher kommt das Wort cascading im Namen.

Was sich mit CSS für Webseiten gestalten lässt

Mit CSS steuerst du fast jedes sichtbare Merkmal einer Seite. Die folgende Übersicht zeigt einige der häufigsten Eigenschaften und was sie bewirken.

Eigenschaft	Wirkung
color	Die Farbe des Textes
font-size	Die Größe der Schrift
background	Die Hintergrundfarbe oder ein Hintergrundbild
margin	Der Abstand um ein Element herum
padding	Der Abstand innerhalb eines Elements

Wo CSS für Webseiten gespeichert wird

Es gibt mehrere Stellen, an denen CSS stehen kann, und nicht alle sind gleich praktisch. Für saubere Seiten hat sich eine Variante durchgesetzt.

Diese drei Möglichkeiten gibt es, CSS unterzubringen:

Direkt an einem einzelnen Element, was schnell unübersichtlich wird
Im Kopf einer einzelnen Seite, gültig nur für diese Seite
In einer eigenen Datei, eingebunden auf allen Seiten

Du kannst CSS direkt an ein einzelnes Element schreiben, in den Kopf einer Seite legen oder in eine eigene Datei auslagern. Die eigene Datei ist der empfohlene Weg. Sie endet auf css und wird im Kopf der HTML-Seite einmal eingebunden. Danach greifen die Regeln auf allen Seiten, die diese Datei laden. Genau so arbeiten auch fertige Scripte: Das Galerie-Layout steckt in einer zentralen CSS-Datei, und wer das Aussehen anpassen will, ändert dort die Werte. Für den Einstieg merkst du dir: HTML liefert den Inhalt, CSS macht ihn ansehnlich, und beide bleiben in getrennten Dateien. Ausprobieren kannst du das ohne Installation, indem du eine kleine HTML-Seite schreibst und eine CSS-Datei daneben legst. Schon mit wenigen Regeln siehst du sofort, wie sich Farben und Abstände im Browser verändern.

Häufige Fragen

Damit der Aufbau einer CSS-Regel sitzt, klären die folgenden Fragen die Punkte, an denen Anfänger oft hängen bleiben.

Wie ist eine CSS-Regel aufgebaut?

Eine Regel beginnt mit einem Selektor, der angibt, worauf sie wirkt, etwa p für alle Absätze. In geschweiften Klammern folgen Eigenschaften aus Name und Wert, getrennt durch einen Doppelpunkt, zum Beispiel color: red; und jede Eigenschaft endet mit einem Semikolon.

Wo wird CSS am besten gespeichert?

Der empfohlene Weg ist eine eigene Datei mit der Endung css, die im Kopf der HTML-Seite einmal eingebunden wird. Danach gelten die Regeln auf allen Seiten, die diese Datei laden, statt sie an jedem Element einzeln zu wiederholen.

Warum heißt es Cascading Style Sheets?

Findet der Browser mehrere Regeln für dasselbe Element, entscheidet die Reihenfolge, welche gilt. Diese gestufte Verarbeitung steckt im Wort cascading, also das Kaskadieren der Regeln.