CSS einbinden

CSS muss irgendwie an das Markup kommen. Dafür gibt es genau drei Wege, und sie sind unterschiedlich gut.

01 / 04Die externe Datei

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Mario Laurich</h1>
    <p>Webentwicklung aus Sachsen.</p>
  </body>
</html>

Ein link-Element im head, rel="stylesheet" sagt was für eine Art Verknüpfung es ist, href sagt wo die Datei liegt. Fertig. Wenn du den HTML-Kurs schon durch hast, ist dir das vertraut, dort steht es in Lektion 9.3.

Das ist der Normalfall, und zwar aus drei Gründen. Die Datei wird einmal geschrieben und gilt auf allen Seiten, du änderst eine Farbe an einer Stelle und die ganze Website zieht mit. Der Browser speichert sie zwischen: beim zweiten Seitenaufruf lädt er sie gar nicht mehr, während das Markup jedes Mal neu über die Leitung geht. Und Inhalt und Gestaltung liegen getrennt, was beim Suchen und Ändern jedes Mal Zeit spart.

Ein Hinweis zu diesem Beispiel: die Datei styles.css gibt es hier nicht, der Link läuft ins Leere. Deshalb siehst du keine Wirkung. Auf einer echten Seite liegt die Datei neben der index.html, dann greift sie.

Interessanter ist, was dabei nicht passiert. Im Reiter „Netzwerk” steht eine einzige Zeile, index.html, und die Console sagt kein Wort über die fehlende Datei. Ein echter Browser hätte hier eine fehlgeschlagene Anfrage stehen. Der Grund für den Unterschied: die Dateien der Aufgabe setzt die Lektionsansicht selbst zusammen, deshalb steht in ihren Zeilen „aus der Aufgabe”, und ein Stylesheet von außen kann sie gar nicht laden. Einen Tippfehler im href verrät dir dieser Reiter hier also nicht. Bilder dagegen holt sie wirklich: ab Abschnitt 7 steht dort jedes Hintergrundbild mit seiner Größe.

02 / 04Der style-Block

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <style>
      h1 {
        color: #2563eb;
      }
    </style>
  </head>
  <body>
    <h1>Mario Laurich</h1>
    <p>Webentwicklung aus Sachsen.</p>
  </body>
</html>

Ein style-Element im head nimmt CSS direkt im Dokument auf. Die Regeln darin sehen genauso aus wie in einer eigenen Datei, sie stehen nur woanders.

Das ist kein Fehler, aber es hat einen engen Anwendungsbereich. Sinnvoll ist es für ein paar Zeilen, die wirklich nur auf dieser einen Seite gebraucht werden, oder für kritische Stile, die sofort da sein sollen, ohne auf eine zweite Datei zu warten. Sobald zwei Seiten dieselben Regeln brauchen, hast du sie doppelt, und ab da ist es eine Baustelle.

03 / 04Das style-Attribut

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
  </head>
  <body>
    <h1 style="color: #2563eb">Mario Laurich</h1>
    <p style="color: #2563eb">Webentwicklung aus Sachsen.</p>
  </body>
</html>

Der dritte Weg schreibt CSS direkt an das Element. Er funktioniert, und er ist trotzdem fast immer die schlechteste Wahl.

Er ist nicht wiederverwendbar: zwei Elemente in derselben Farbe heißen zweimal dieselbe Angabe, und beim Ändern findest du garantiert nur eine davon. Er mischt Inhalt und Darstellung genau da, wo die Trennung am meisten wert wäre. Und er steht über allem: eine Regel im Stylesheet kann ihn nicht überschreiben, egal wie genau ihr Selektor ist. Eine Spezifität hat er dabei gar nicht, er ist eine eigene Stufe darüber. Was das bedeutet, rechnet Abschnitt 3 vor.

Es gibt eine legitime Ausnahme, und die begegnet dir später: JavaScript, das einen Wert zur Laufzeit setzt, etwa die Breite eines Fortschrittsbalkens. Von Hand geschrieben gehört es fast nie ins Markup.

04 / 04Wo du in diesem Kurs arbeitest

Ab jetzt liegen zwei Dateien im Editor: index.html mit dem Markup und styles.css mit den Regeln. Zwischen beiden wechselst du über die Reiterleiste über dem Editor.

Das Stylesheet ist dabei schon eingebunden, du musst dich also nicht bei jeder Aufgabe darum kümmern. Gearbeitet wird fast immer in styles.css, das Markup ist in den Aufgaben meistens vorgegeben und muss nicht angefasst werden. Wenn eine Aufgabe doch etwas am HTML will, steht es ausdrücklich dabei.

Der Editor lässt dich trotzdem überall hineinschreiben, und die Prüfung merkt es nicht: Wer die geforderten Angaben als style-Attribut ins Markup schreibt, bekommt eine grüne Liste, denn geprüft wird der Wert, den der Browser am Ende ausrechnet, und dabei zählt ein Inline-Style genauso wie eine Regel. Das ist Absicht, weil dieselbe Prüfung sonst jeden zweiten richtigen Weg abweisen würde. Nur lernst du davon nichts: Inline-Styles sind in einer echten Seite die schlechteste der drei Möglichkeiten, und warum, steht in Abschnitt 3 bei der Kaskade.

In dieser einen Lektion ist es anders: hier schreibst du die ganze Datei selbst, inklusive head. Nur so lässt sich prüfen, ob der link an der richtigen Stelle sitzt.