CSS und JavaScript einbinden

Dieser Kurs ist reines HTML. Wie du CSS und JavaScript überhaupt in eine Seite hineinbekommst, ist aber selbst HTML, und ohne diese Lektion könntest du nach dem Kurs keine eigene Seite mit Stylesheet bauen.

01 / 03Der Normalfall

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mein Kochblog</title>

    <link rel="stylesheet" href="/stil.css">
    <script src="/skript.js" defer></script>
  </head>
  <body>
    <h1>Linsensuppe</h1>
  </body>
</html>

Zwei Zeilen, mehr ist es nicht.

<link rel="stylesheet" href="/stil.css"> bindet eine CSS-Datei ein. Das ist dasselbe link-Element wie beim Favicon, nur mit einem anderen rel: Dort war es icon, hier ist es stylesheet. Der href folgt den Pfadregeln aus Abschnitt 4.

Das Stylesheet gehört in den head, und zwar aus einem konkreten Grund: Der Browser soll die Gestaltung kennen, bevor er zu zeichnen beginnt. Kommt das CSS später, siehst du für einen Moment die ungestylte Seite, und dann springt alles an seinen Platz.

<script src="/skript.js" defer></script> bindet eine JavaScript-Datei ein. Beachte den schließenden Tag: script ist kein Void-Element. Auch wenn es über src lädt und keinen Inhalt hat, muss </script> dastehen. Fehlt es, schluckt der Browser den Rest der Seite.

Eins vorweg, damit du nicht suchst: Die beiden Dateien laden hier nicht. Die Seite läuft aus Sicherheitsgründen abgeschottet, und dabei fallen genau diese beiden Sorten heraus. Im Reiter „Netzwerk“ steht deshalb nur das Dokument selbst. Am Muster ändert das nichts, in deiner eigenen Datei laden beide ganz normal.

02 / 03Warum defer

Bei Skripten ist die Position heikler als bei Stylesheets. Ein script ohne Zusatz hält das Laden der Seite an: Der Browser stoppt das Verarbeiten des HTML, holt die Datei, führt sie aus und macht erst danach weiter. Bei einer langsamen Verbindung sieht der Nutzer solange nichts.

Dagegen gibt es zwei Attribute:

• defer lädt die Datei nebenher und führt sie aus, sobald das Dokument vollständig geparst ist. Mehrere Skripte laufen dabei in der Reihenfolge, in der sie im Dokument stehen. Das ist in fast allen Fällen das Richtige.
• async lädt ebenfalls nebenher, führt aber sofort aus, sobald die Datei da ist. Die Reihenfolge ist damit nicht mehr vorhersehbar. Sinnvoll nur für Skripte, die von nichts anderem abhängen, etwa eine Zählpixel-Bibliothek.

Der zweite Vorteil von defer ist praktisch: Das Skript läuft erst, wenn das Dokument steht. Es findet also alle Elemente vor, die es ansprechen will.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Mein Kochblog</title>
  </head>
  <body>
    <h1>Linsensuppe</h1>

    <script src="/skript.js"></script>
  </body>
</html>

Das ist die ältere Lösung: Das script steht als letztes im body. Dann ist beim Ausführen ohnehin alles geparst. Es funktioniert weiterhin und begegnet dir in vielen Anleitungen. defer im head ist trotzdem die bessere Wahl, weil der Browser die Datei früher zu laden beginnt.

03 / 03Wenn es doch mal direkt im Dokument steht

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Mein Kochblog</title>

    <style>
      h1 { color: darkgreen; }
      p { max-width: 40ch; }
    </style>
  </head>
  <body>
    <h1>Linsensuppe</h1>
    <p>Der Kopf dieser Datei trägt die Gestaltung direkt in sich.</p>
  </body>
</html>

<style> schreibt CSS direkt in den head. Ohne src funktioniert <script> genauso: Der Code steht dann zwischen den Tags.

Beides hat seine Fälle: eine einzelne Seite ohne eigenes Projekt, eine E-Mail-Vorlage, ein schneller Test. Für eine echte Website ist die eigene Datei besser, weil der Browser sie zwischenspeichert und auf jeder weiteren Seite nicht neu lädt.

Die dritte Möglichkeit ist das style-Attribut direkt an einem Element, das du in Lektion 1.6 gesehen hast. Es gilt nur für dieses eine Element, ist am schwersten zu überschreiben und am schwersten zu pflegen. Nimm es nur, wenn es keinen anderen Weg gibt.

Die Reihenfolge nach Vorliebe lautet also: eigene Datei, dann <style> im Dokument, dann als letzte Wahl das Attribut.