Heutzutage ist eine Webseite ein Konstrukt von mehreren Dateien, die alle ihre Aufgaben haben. Lange sind die Zeiten vorbei, wo es pro Seite bei einer Homepage es nur noch eine Datei gab. Mit den heutigen technischen Möglichkeiten können komplexe Webseiten gestaltet werden, die auch Animationen enthalten. Mit Einführung von CSS, Cascading Style Sheets, wurden die Möglichkeiten des Designen und Layouten von Webseiten erheblich erweitert. Seit dem wird im Webdesign die Trennung zwischen Struktur, Layout und Design vollzogen. Die HTML Datei beinhaltet dabei nur noch die Struktur. Das Design und Layout wird in die CSS Dateien ausgelagert.

Aufbau einer CSS Datei

Eine CSS Datei ist sehr simpel Aufgebaut. Die Syntax ist dabei einfacher als bei HTML. Als Beispiel soll uns mal folgender Code dienen.


Selektor {
    Eigenschaft: Wert;
    Eigenschaft: Wert;
}

Der Selektor ist entweder ein HTML Tag (p,body,div) oder eine Klasse (class) oder ID (id). Dieser muss mit den anzusprechenden Element im HTML Dokument übereinstimmen. Die Eigenschaft ist die Sache die beeinflusst werden soll, zum Beispiel die Schriftgröße. Der Wert verändert die Eigenschaft, zum Beispiel von 14px auf 16px. Die Möglichkeiten des Wertes hängen immer von der Eigenschaft ab. Die Beschreibung des Selektors wird immer mit eine geschweiften Klammer eröffnet und nach Festlegung aller Eigenschaften, mit einer geschweiften Klammer geschloßen. Möchte man zum Beispiel die Schriftgröße auf der Webseite einheitlich auf 14px festsetzen, schreibt man folgenden Code in die CSS Datei.


body {
    font-size: 14px;
}

Damit wird nun überall die Schriftgröße 14px eingesetzt. Natürlich kann man hier nun auch Ausnahmen treffen. Dazu muss der Bereich nur mit einer ID, oder bei wiederholt auftretenden Bereichen mit einer Klasse angesprochen werden. Darin unterscheiden sich die beiden Selektoren nämlich.

Während HTML Tags fest definiert sind, können Klassen und ID´s frei gewählt werden. Dabei wird eine ID für einen Bereich fest zugeordnet und sollte auch nur ein mal auftreten. Eine Klasse kann, ähnlich wie beim normalen Programmieren, mehrmals auftreten. Bei jeden Auftritt, wird der Bereich mit der Klasse dann immer gleich mit den identischen Werten formatiert, solange es keine spezifischen Änderungen gibt.

Im HTML Bereich wird eine Klasse mit der Syntax <div class="article-content"> festgelegt. Durch den Aufruf .article-content als Selektor in der CSS Datei, kann ich diesen DIV Tag nun definieren und beschreiben. Parallel dazu werden auch ID´s vergeben, <div id="first-article">. Nun kann ich im CSS mit #first-article diesen genauer definieren. Dabei sind je nach CSS Standart verschiedene Eigenschaften anwendbar. Eine gute Auflistung findet ihr hier.

Natürlich kann beides auch kombiniert werden. Dabei werden die Eigenschaften zusammengefügt und bei Identischen Eigenschaften die der ID angewendet. So könnte im HTML Code ein DIV Tag folgendermaßen aussehen, <div id="first-article" class="article-content">.

Um genau ein bestimmtes Element anzusprechen, sind auch Verschachtelungen möglich. Angenommen euer HTML Code sieht folgendermaßen aus.

<body>
 <main>
 <article>
 <p id="first-paragraph">
 Lorem ipsum dolor sit amet, ....
 </p>
 <p>
 Ut enim ad minim veniam, ....
 </p>
 </article>
 </main>
</body>

So könnt ihr mit folgenden CSS Code alle Paragraphen mit der Schriftgröße 14px, aber den ersten Paragraphen eines Artikels mit 16px und etwas dicker geschrieben, gestalten. Dazu sieht der CSS Code wie folgt aus.

p{
    font-size: 14px;
}
body main article #first-paragraph {
    font-size: 14px;
    font-weight:bold;
} 

Natürlich sind noch ganz andere Sachen möglich. Für den Anfang soll das aber erst mal reichen.

Einbinden der CSS Datei

Um nun die Änderungen auch zu sehen, muss die CSS Datei in das HTML eingebunden werden. Es würde zwar auch funktionieren den CSS Code direkt in die HTML Datei zu schreiben, dass macht man indem man im Head Bereich einer HTML Datei einfach ein <style> ... </style> Tag einfügt und dazwischen den Code einbaut. Allerdings würde die Datei sehr unübersichtlich werden und der Vorteil von CSS, alle angesprochenen Selektoren Seitenweit identisch aussehen zu lassen, ohne Redundanz zu haben und den Code jedesmal neu zu schreiben, wegfallen. Außerdem sehen das Suchmaschinen nicht so gerne. Nur in seltenen Fällen macht man das. Auch das direkte beschreiben eines HTML Tag mit sogenannten Inline Styles macht man eigentlich nur in Ausnahmefällen.

Also bindet man die Datei im Head mit einer einfachen Zeile ein.
<link rel="stylesheet" href="style.css" media="screen">

Mit rel wird der Datei ein Bezeichner mitgegeben. href gibt den Ort der Datei an. Mit media wird der Typ angegeben. Hier sind neben screen für die Bildschirmausgabe, noch weitere Typen möglich. So kann mit den Media Typ print eine extra CSS Datei für das Drucken der Seite definiert werden. Bei nicht Nutzung des HTML5 Standarts muss zusätzlich noch der type angegeben werden. Der muss mit den Wert text/css gefüllt sein, sonst wird selbst bei gültigen CSS Code die Datei nicht interpretiert. Natürlich können so viele CSS Dateien eingebunden werden, wie man möchte. Aufgrund der Performance sollte das aber nicht übertrieben werden. Denn jede Datei verursacht ein Request, welches beantwortet werden muss. Das dauert je nach Dateigröße mehrere Millisekunden.