Deine erste eigene styles.css

Im Editor dieses Kurses lagen die zwei Dateien immer schon bereit. Auf dem eigenen Rechner legst du sie selbst an. Das ist schon der ganze Unterschied.

01 / 06Zwei Dateien nebeneinander

Ein Ordner, darin index.html und styles.css. Dazu ein Unterordner bilder/ für alles, was die Seite einbindet. Mehr braucht eine erste Seite nicht, und mehr baue ich am Anfang auch nicht.

Wird es größer, wandert das Stylesheet in einen eigenen Ordner, nach css/styles.css. Der Verweis im head ändert sich dann mit, und aus href="styles.css" wird href="css/styles.css".

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mario Laurich, Webentwicklung</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Mario Laurich</h1>
    <p>Webentwicklung aus Sachsen.</p>
  </body>
</html>

Im Beispiel steht die Datei, mit der eine Seite anfängt. Im head stehen vier Zeilen, und jede hat einen Grund. charset sagt, wie die Zeichen zu lesen sind, sonst steht statt ü ein Zeichensalat wie ü. viewport sagt dem Handy, dass es die Seite nicht herauszoomen soll. Ohne diese Zeile ist jede Media Query aus Abschnitt 12 wirkungslos. Der title steht im Tab und im Suchergebnis. Und der link holt das Stylesheet.

02 / 06Der Pfad im Stylesheet

<div class="kachel gut">Vom richtigen Ordner aus gedacht</div>
<div class="kachel schlecht">Vom falschen Ordner aus gedacht</div>

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.kachel {
  display: grid;
  place-items: center;
  height: 120px;
  margin-bottom: 16px;
  border-radius: 12px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 4px rgb(0 0 0 / 60%);
  background-color: #52525b;
  background-size: cover;
  background-position: center;
}

/* Beide Pfade sind relativ und meinen dieselbe Datei.
   Gerechnet wird hier vom Ordner der Seite aus. */
.gut {
  background-image: url("lernen/media/demo-600.jpg");
}

/* So nicht: gedacht von lernen/ aus statt vom Ordner,
   von dem aus der Browser rechnet. Er hängt den Pfad
   dort an und sucht unter /media/demo-600.jpg. */
.schlecht {
  background-image: url("media/demo-600.jpg");
}

Ein relativer Pfad in einem Stylesheet bezieht sich auf die CSS-Datei, nicht auf die HTML-Datei.

Im Beispiel meinen beide Kacheln dieselbe Datei, und beide Pfade sind relativ. Der obere rechnet vom richtigen Ordner aus und kommt an. Der untere rechnet von einem anderen aus, und die Kachel bleibt grau. Im Reiter „Netzwerk“ steht, wo der Browser gesucht hat, nämlich /lernen/media/demo-600.jpg als geladen und /media/demo-600.jpg in Rot als fehlgeschlagen. Das Problem ist also nicht, dass der Pfad relativ ist. Es kommt auf den Ordner an, von dem aus gerechnet wird.

Den Unterschied zwischen den beiden Bezugspunkten kann man hier nicht zeigen. In dieser Seite steht das CSS im head, eine eigene CSS-Datei gibt es gar nicht, und deshalb fallen beide Bezugspunkte zusammen. Auf dem eigenen Rechner ist es genauso, solange beide Dateien nebeneinanderliegen.

Sobald das Stylesheet nach css/ wandert, sucht der Browser bilder/foto.jpg unter css/bilder/foto.jpg und findet nichts. Dann hilft entweder ein Pfad, der eine Ebene hochgeht (../bilder/foto.jpg), oder einer, der beim Wurzelverzeichnis anfängt (/bilder/foto.jpg). Der zweite geht aber nur über einen Webserver wie Live Server aus dem HTML-Kurs. Öffnest du die Seite per Doppelklick, sucht der Browser ihn ganz oben auf der Festplatte.

Wenn nichts erscheint, sehe ich zuerst in den Reiter „Netzwerk“, hier wie in den Entwicklerwerkzeugen des Browsers. Dort steht die Zeile in Rot, mit dem Pfad, an dem der Browser wirklich gesucht hat. Damit ist die Frage in zwei Sekunden beantwortet.

03 / 06Warum kein @import

@import "komponenten.css"; sieht nach einer guten Idee aus, weil man das Stylesheet damit aufteilen kann. Im Browser ist es eine schlechte. Von einer importierten Datei erfährt er erst, wenn er die Datei gelesen hat, die sie importiert. Das kostet eine zusätzliche Runde, bevor überhaupt eine Zeile CSS ankommt, und bei verschachtelten Importen eine Runde je Ebene. Mehrere link-Zeilen im head sieht der Browser dagegen sofort alle und holt sie gleichzeitig.

Zum Aufteilen nehme ich deshalb mehrere link-Zeilen. Kommt später ein Build-Werkzeug dazu, fügt das die Dateien vor der Auslieferung ohnehin zusammen, und dann ist @import wieder in Ordnung.

04 / 06Was zuerst in die leere Datei gehört

<main class="inhalt">
  <h1>Mario Laurich</h1>
  <p>So sieht eine frische Datei aus, bevor die erste Komponente dazukommt.</p>
</main>

/* 1. Die Reihenfolge der Layer */
@layer reset, tokens, basis, komponenten, utilities;

/* 2. Der Reset */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  p {
    margin: 0;
  }

  img,
  video {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}

/* 3. Die Tokens */
@layer tokens {
  :root {
    --farbe-text: #18181b;
    --farbe-gedaempft: #52525b;
    --abstand-m: 16px;
    --abstand-l: 24px;
    --schrift-2xl: clamp(28px, 5vw, 40px);
  }
}

/* 4. Die Basis */
@layer basis {
  body {
    padding: var(--abstand-l);
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: var(--farbe-text);
  }

  h1 {
    margin-block-end: var(--abstand-m);
    font-size: var(--schrift-2xl);
  }
}

/* Ab hier kämen die Komponenten. */

Oben steht die @layer-Zeile, darunter Reset, Tokens und Basis, in dieser Reihenfolge. Das sind zusammen keine sechzig Zeilen. Danach fängt die eigentliche Arbeit an, und jede Regel hat schon ihren Platz.

Der Rest ist Handwerk beim Benennen. Dateinamen schreibe ich klein und ohne Umlaute und Leerzeichen, also ueber-mich.html und nicht Über mich.html. Auf dem eigenen Rechner funktioniert beides, auf dem Server oft nur das erste, weil dort Groß- und Kleinschreibung zählt. Umlaute und Leerzeichen müssen außerdem in der Adresse umgeschrieben werden, und je nach Werkzeug zum Hochladen kommt dabei ein anderer Name an. Dieser Fehler taucht erst auf, wenn die Seite schon online ist.

05 / 06Der erste eigene Ordner

Für den Anfang reicht ein Ordner mit einer index.html nach dem Gerüst aus dem ersten Beispiel und daneben einer leeren styles.css. Hinein kommen die Layer aus Lektion 16.1, und die index.html öffnest du mit einem Doppelklick.

Steht der Viewport nicht im head, tut ein Handy so, als wäre es 980 Pixel breit, und keine einzige Media Query aus Abschnitt 12 greift mehr. Den Fehler sucht man dann im CSS, wo keiner ist.

06 / 06Veröffentlichen

Auf dem eigenen Rechner reicht ein Doppelklick. Zum Veröffentlichen kommt der Ordner auf einen Server, und kostenlos geht das bei Anbietern, die ein Verzeichnis direkt aus einem Git-Repository ausliefern. Das ist der nächste Schritt und geht über diesen Kurs hinaus. Was du dafür brauchst, hast du jetzt.