CSS Schnellstart – CSS in einer Datei

Wenn du mal eine komplette Webseite mit CSS gestalten musst, dann wirst du feststellen, dass du ganz schön viele CSS-Regeln erstellen wirst.

Damit du nun nicht alles in das eine HTML-Dokument eintragen musst, lohnt es sich den CSS-Code in eine eigene Datei zu packen und diese Datei einfach in HTML zu laden.

Das hat auch noch einen weiteren Vorteil: Du kannst deine CSS-Regel in mehreren HTML-Dateien verwenden und musst die Regeln nicht doppelt schreiben!

Nehmen wir an, du speicherst deine CSS-Regel von vorhin in einer Datei, die style.css heißt.

So verwendest du eine CSS-Datei auf deiner HTML-Seite:

&lt;head&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt;

Du verwendest das link-Element. Das href-Attribut zeigt den Pfad zur CSS-Datei. Die Datei muss logischerweise an dieser Stelle auffindbar sein. Dazu musst du dem Browser verraten, dass es sich um CSS-Regeln handelt, dies machst du mit dem Attribut rel und dem Wert stylesheet.

Übrigens kannst du so auch CSS-Frameworks wie Bootstrap verwenden, aber dazu kommen wir in Modul 4 noch.

Wir probieren das Link-Element in der folgenden Übung einmal aus!

CSS Schnellstart – CSS in einer Datei

CSS Schnellstart – Modul 1 – CSS Grundlagen einfach verstehen