Was ist CSS?

Während es bei HTML hauptsächlich um den Inhalt einer Webseite geht, verwendet man CSS für das Erscheinungsbild dieser.

CSS steht für Cascading Style Sheets, was übersetzt „Mehrstufige Formatvorlage“ bedeutet. Es ist also eine Formatierungssprache für HTML-Dokumente. Im Webdesign bietet CSS die Möglichkeit, Design-Anweisungen festzulegen. So können Sie beispielsweise bestimmen, dass jede H1-Überschrift Ihrer Webseite in einer bestimmten Größe oder Farbe erscheinen soll. Dadurch müssen Sie nicht immer wieder aufs Neue die HTML-Elemente einzeln codieren. Das spart Aufwand und Zeit.

Wie funktioniert CSS?

Früher wurden Webseiten komplett mit HTML erstellt. Je komplexer und größer eine Webseite jedoch wird, desto umständlicher wäre es, ausschließlich mit HTML zu arbeiten. Denn: Mit Formatierungen über HTML können Sie einzelne Elemente verändern, mit CSS mehrere auf einmal. HTML eignet sich demnach für kleine, simple Webseiten mit wenig Inhalten und Formatierungen, CSS empfiehlt sich dagegen für etwa komplexere Seiten.

Die CSS-Datei wird in das jeweilige HTML-Dokument eingebettet. Dabei können Sie entweder eine externe CSS-Datei verlinken (Möglichkeit 1) oder CSS-Anweisungen direkt in das HTML-Dokument einfügen (Möglichkeit 2).

Möglichkeit 1: Ein externes Stylesheet

Eine CSS-Datei kann separat auf dem Server erstellt und bearbeitet werden. Die Datei können Sie mit Ihrem Lieblingseditor (zum Beispiel Texteditor) erstellen. Hierbei muss der Dateiname auf .css enden. Diese Variante gilt als einfachste, da alle Style-Informationen in einer Datei zusammengefasst sind. Man verlinkt diese Datei dann im <head>-Bereich des HTML-Dokuments, was sich so darstellt:

<link href="Link zu der abgelegten Datei.css" rel="stylesheet" type="text/css">

Möglichkeit 2: CSS direkt im HTML-Dokument

Wenn Sie beispielsweise alle Hauptüberschriften (h1) in Ihrem HTML-Dokument in der Farbe Blau haben wollen, würden Sie folgenden Befehl formulieren:

<h1> {color: blue;} Ihre Überschrift </h1>

Eine CSS-Anweisung besteht also aus:

  1. Der Bezeichnung für das Element, auf das die Anweisung abzielt (in diesem Fall: color)
  2. Der Eigenschaft, die dem Element zugewiesen werden (in diesem Fall: blau)

Wichtig hierbei sind die geschweiften Klammern sowie das Semikolon am Ende der Eigenschaft.

Vorteile von CSS

Sie können Ihre Webseite auch ohne CSS erstellen. Jedoch bieten CSS-Dateien die Möglichkeit, mit nur einer Änderung das gesamte Layout Ihrer kompletten Seite anzupassen. Dies spart, wie eingehend erwähnt, sehr viel Aufwand. Durch die Option die Style-Angaben auf allen Unterseiten umzusetzen, entstehen zusätzlich Vorteile für die Suchmaschinenoptimierung. Durch entsprechende Befehle in der CSS-Datei kann ein Responsives Design erstellt werden, sodass sich die Webseite stets an das genutzte Medium (PC-Bildschirm, Mobiltelefon, Tablet) anpasst. Auch die Ladegeschwindigkeit einer Webseite wird mit der Nutzung externer CSS-Dateien verbessert, da der Code des HTML-Dokuments schlanker ist.

Die zusätzliche Verwendung von CSS bei der Erstellung einer Webseite ergibt also in vielerlei Hinsicht Sinn, bedeutet aber auch, dass Sie sich mit noch einem weiteren System auseinandersetzen müssen.

Hier erfahren Sie weitere Details zu den Programmiersprachen HTML und JavaScript:

Sie sind sich nicht sicher, welche Programmiersprache für Sie die Richtige ist, oder wollen Ihre Webseite professionell erstellen lassen? web4business berät Sie gerne zu Ihren Möglichkeiten.