CSS einbinden
Bevor du gestalten kannst, muss der Browser wissen, dass es überhaupt CSS gibt. Dafür gibt es drei Wege – und einen davon solltest du fast immer nehmen.
Wie eine Regel aufgebaut ist
h1 { color: darkred; font-size: 2rem; }
│ └──┬──┘ └──┬──┘
│ Eigenschaft Wert
│ └────────┬────────────────────┘
└─ Selektor DeklarationsblockEine Regel besteht aus einem Selektor und einem Deklarationsblock in geschweiften Klammern.
Im Block stehen Deklarationen. Jede besteht aus einer Eigenschaft, einem Doppelpunkt, einem Wert und einem Semikolon.
Das Semikolon hinter der letzten Deklaration darf man weglassen. Lass es trotzdem stehen – sonst fehlt es garantiert genau dann, wenn du eine Zeile ergänzt.
Die drei Wege
1. Eigene Datei – der Regelfall
<head>
<link rel="stylesheet" href="stil.css">
</head>Alle Regeln stehen in stil.css. Diese Datei gilt für alle Seiten, die sie einbinden.
2. Im <style>-Element – nur für Ausnahmen
<head>
<style>
h1 { color: darkred; }
</style>
</head>Die Regeln gelten nur für diese eine Seite.
3. Im style-Attribut – möglichst gar nicht
<h1 style="color: darkred;">Titel</h1>Die Regel gilt nur für dieses eine Element.
Deine Homepage besteht aus fünf Seiten. Alle sollen dieselbe Schriftart bekommen.
a) Wie viele Stellen musst du bei jedem der drei Wege anfassen?
b) Später soll die Schriftart geändert werden. Wie viele Stellen jetzt?
c) Welchen Weg wählst du – und warum?
Tipp: Wie zähle ich?
Stell dir für jeden Weg die gleiche Frage: Wie viele Dateien muss ich öffnen, und wie oft schreibe ich dieselbe Regel hin?
Nimm für b) an, dass auf jeder Seite zwanzig Elemente stehen, die die Schrift bekommen sollen. Dann wird der Unterschied deutlich.
Das style-Attribut ist nicht verboten, aber es ist fast immer ein Zeichen dafür, dass etwas schiefläuft. Es vermischt Inhalt und Gestaltung wieder – genau das, was CSS trennen sollte.
In diesem Lernpfad kommt es deshalb nicht mehr vor.
Ausprobieren
a) Ändere die Farbe der Überschrift.
b) Ergänze eine Regel, die alle Absätze in einer anderen Schriftgröße darstellt. Die Eigenschaft heißt font-size, ein möglicher Wert ist 1.2rem.
c) Baue absichtlich einen Fehler ein: Schreibe colour statt color. Was passiert?
d) Baue einen zweiten Fehler ein: Lass ein Semikolon weg. Was passiert jetzt?
Kommentare in CSS
/* Farben der Seite */
h1 { color: hsl(140 60% 30%); }
/* Das hier ist gerade abgeschaltet:
p { font-size: 2rem; }
*/CSS kennt nur eine Sorte Kommentar: /* … */. Sie funktioniert auch über mehrere Zeilen und eignet sich gut, um beim Suchen eines Fehlers Regeln vorübergehend abzuschalten.
Ein // wie in Java gibt es in CSS nicht. Es wirkt nicht als Kommentar, sondern macht die folgende Regel ungültig.