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" gibt an, was für eine Art Verknüpfung es ist, und href, wo die Datei liegt. Fertig. Wenn du den HTML-Kurs schon durch hast, kennst du das, 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. Außerdem speichert der Browser die Datei zwischen und lädt sie beim nächsten Seitenaufruf meist nicht noch einmal, das Markup dagegen geht jedes Mal neu über die Leitung. Und Inhalt und Gestaltung liegen getrennt, was beim Suchen und Ändern jedes Mal Zeit spart.

In diesem Beispiel gibt es die Datei styles.css nicht. Der Link läuft ins Leere, deshalb siehst du keine Wirkung. Auf einer echten Seite liegt die Datei neben der index.html, und dann greift sie.

Interessanter ist, was dabei nicht passiert. Im Reiter „Netzwerk“ steht eine einzige Zeile, index.html, und in der Console steht kein Wort über die fehlende Datei. Ein echter Browser hätte hier eine fehlgeschlagene Anfrage. Das liegt an der Lektionsansicht. Hier werden die Dateien der Aufgabe direkt zusammengesetzt. Deshalb steht in den Zeilen „aus der Aufgabe“, und ein Stylesheet von außen lässt sich gar nicht laden. Einen Tippfehler im href siehst du in diesem Reiter also nicht. Bilder werden dagegen wirklich geholt, und 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.

Falsch ist das nicht, es passt nur selten. 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>

Beim dritten Weg steht das CSS direkt am Element. Das funktioniert, und es ist trotzdem fast immer die schlechteste Wahl.

Wiederverwenden lässt sich davon nichts. Zwei Elemente in derselben Farbe brauchen zweimal dieselbe Angabe, und beim Ändern findest du garantiert nur eine davon. Außerdem mischt das Attribut Inhalt und Darstellung genau da, wo die Trennung am meisten wert wäre.

Und es schlägt jede normale Regel im Stylesheet, egal wie genau ihr Selektor ist. Wie viel Gewicht ein Selektor hat, heißt Spezifität und kommt in Abschnitt 3 dran. Das Attribut hat gar keine, es steht eine Stufe darüber. Vorbei kommt nur eine Deklaration mit !important, und auch das wird in Abschnitt 3 vorgerechnet.

Es gibt eine legitime Ausnahme, sie kommt in diesem Kurs nur nicht vor: JavaScript, das einen Wert zur Laufzeit setzt. Von Hand geschrieben gehört CSS 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 ihre Reiter.

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 du doch etwas am HTML ändern sollst, steht es ausdrücklich in der Aufgabe.

Schreiben kannst du im Editor trotzdem überall, und bei der Prüfung fällt das nicht auf. Schreibst du die geforderten Angaben als style-Attribut ins Markup, wird die Liste trotzdem grün. Geprüft wird nämlich der Wert, den der Browser am Ende ausrechnet, und dabei zählt ein Inline-Style genauso wie eine Regel. Das ist Absicht, sonst würden auch richtige Wege abgewiesen. 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.

Eine eigene Datei geht auch jetzt schon. Dafür brauchst du nur einen Ordner mit einer index.html und einer styles.css daneben, beide aus einem Texteditor, und mit einem Doppelklick auf die index.html geht die Seite im Browser auf. Wie man die Datei von Anfang an ordnet, steht am Ende des Kurses in „Deine erste eigene styles.css“.

In der Aufgabe dieser Lektion arbeitest du ausnahmsweise im head der index.html, denn nur dort lässt sich prüfen, ob der link an der richtigen Stelle sitzt.