Die erste CSS-Regel

Gestern ist die Struktur der Vereinswebsite entstanden. Heute bekommt sie ein Aussehen, ohne dass wir an der Bedeutung im HTML etwas ändern. In diesem Kapitel gehen wir den Weg von der leeren Datei bis zur ersten wirksamen Regel und klären dann genau, woraus eine Regel besteht.

Was du am Ende kannst

• erklären, welche Aufgabe CSS hat und woher das Standardaussehen einer Seite kommt
• ein Stylesheet anlegen, einbinden und prüfen, ob es wirkt
• die Bestandteile einer Regel benennen
• Elemente über ihren Namen und über Klassen auswählen
• die drei Orte für CSS unterscheiden und den richtigen wählen

Live-Coding zum Mitmachen

⤓ demo-06-erste-regel.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, termine.html

Ab jetzt lohnt sich der Server

Heute speicherst du ständig CSS. Öffne den entpackten Ordner in VS Code und starte im Terminal npx vite, wie im Kapitel VS Code einrichten beschrieben. Änderungen erscheinen dann sofort im Browser. Pro Ordner läuft ein Server: Beende ihn mit Strg+C, bevor du zum nächsten Starter wechselst.

Was ist CSS?

CSS steht für Cascading Style Sheets. Während HTML festlegt, was ein Inhalt ist, legt CSS fest, wie er dargestellt wird. Das Prinzip ist immer gleich: Du wählst Elemente aus und sagst, wie sie aussehen sollen.

Auch eine Seite ohne dein CSS hat bereits ein Aussehen:

Eine Seite ohne eigenes CSS

<h3>Eine Überschrift</h3>
<p>Ein Absatz mit einem <a href="#">Link</a> und <strong>wichtigem Text</strong>.</p>
<ul>
  <li>Ein Listeneintrag</li>
</ul>

Überschriften sind groß und fett, Links blau und unterstrichen, Listen haben Punkte. Das kommt aus dem Standard-Stylesheet des Browsers. Dein CSS ergänzt und überschreibt diese Vorgaben.

Schritt für Schritt zur ersten Regel

Schritt 1: Die Datei anlegen

Ein Stylesheet ist eine reine Textdatei mit der Endung .css. Lege sie im selben Ordner wie deine HTML-Seiten an:

lauftreff/
├── index.html
├── termine.html
├── kontakt.html
└── stil.css        ← neu

Der Name ist frei wählbar. In dieser Schulung heißt die Datei stil.css.

Schritt 2: Die Datei einbinden

Von selbst weiß die HTML-Seite nichts von der neuen Datei. Du musst sie mit einem link-Element im head verknüpfen:

<head>
  <meta charset="utf-8">
  <title>Lauftreff Morgenrunde</title>
  <link rel="stylesheet" href="stil.css">
</head>

Attribut	Bedeutung
rel="stylesheet"	die Art der Verknüpfung: Die verlinkte Datei ist ein Stylesheet
href="stil.css"	der Pfad zur Datei, hier relativ im selben Ordner

Diese Zeile gehört in jede HTML-Seite, die das Stylesheet nutzen soll.

Schritt 3: Eine Regel schreiben

Schreibe in stil.css:

body {
  color: teal;
}

Schritt 4: Prüfen

Speichere beide Dateien und sieh dir die Seite an. Der gesamte Text ist jetzt türkis. Damit weißt du: Die Verbindung steht.

Wenn sich nichts ändert, liegt es fast immer an einem dieser Punkte:

1. Eine Datei ist nicht gespeichert.
2. Der Dateiname oder Pfad im href stimmt nicht. Der Netzwerk-Tab der DevTools zeigt dann für stil.css den Status 404.
3. Das link-Element steht nicht im head.

Der Aufbau einer Regel

Jetzt sehen wir uns genauer an, was du geschrieben hast. Eine Regel besteht aus einem Selektor und einem Deklarationsblock:

h1 {                  ← Selektor: Welche Elemente sind gemeint?
  color: teal;        ← Deklaration
  font-size: 2rem;    ← Deklaration
}

Jede Deklaration besteht wiederum aus einer Eigenschaft und einem Wert:

color: teal;
└─┬─┘  └─┬┘
  │      └── Wert: Wie soll es sein?
  └───────── Eigenschaft: Was wird eingestellt?

Bestandteil	Regel
geschweifte Klammern	umschließen alle Deklarationen einer Regel
Doppelpunkt	trennt Eigenschaft und Wert
Semikolon	beendet die Deklaration
Kommentar	steht zwischen /* und */

Ein Stylesheet ist nichts weiter als eine Folge solcher Regeln:

/* Grundschrift für die ganze Seite */
body {
  font-family: system-ui, sans-serif;
  color: #1c2330;
}

h1 {
  color: #0f766e;
}

CSS meldet keine Fehler

Der Browser überspringt, was er nicht versteht, ohne jede Meldung. Fehlt ein Semikolon, wird auch die nächste Zeile ungültig, und beide bleiben ohne Wirkung. Das ist einer der häufigsten Fehler. Im Kapitel Debugging lernst du, wie du ihn findest.

Der Elementselektor

Der einfachste Selektor ist der Name eines HTML-Elements. Er trifft alle Elemente dieser Art auf der Seite.

Regeln für h3 und li

h3 {
  color: teal;
  font-size: 1.5rem;
}

li {
  color: purple;
}

<h3>Unsere Termine</h3>
<p>Dieser Absatz wird von keiner Regel getroffen.</p>
<ul>
  <li>Montag</li>
  <li>Mittwoch</li>
</ul>

Damit legst du die Grundlagen fest, die überall gelten sollen, etwa die Schrift im body oder die Farbe aller Überschriften.

Der Klassenselektor

Oft sollen nicht alle Absätze gleich aussehen, sondern nur bestimmte. Dafür vergibst du im HTML eine Klasse und wählst sie im CSS mit einem Punkt aus. Beide Seiten gehören zusammen:

<p class="hinweis">Felder mit * sind Pflichtfelder.</p>

.hinweis {
  color: #55606e;
}

Im HTML steht der Name ohne Punkt, im CSS mit Punkt.

Klassen in der Anwendung

.hinweis {
  color: #55606e;
  font-style: italic;
}

.wichtig {
  font-weight: bold;
}

<p>Ein gewöhnlicher Absatz.</p>
<p class="hinweis">Ein Absatz mit der Klasse hinweis.</p>
<ul>
  <li>Ein gewöhnlicher Listeneintrag</li>
  <li class="hinweis">Dieselbe Klasse an einem anderen Element</li>
  <li class="hinweis wichtig">Zwei Klassen an einem Element</li>
</ul>

• Dieselbe Klasse darf an beliebig vielen und auch an verschiedenen Elementen stehen.
• Ein Element darf mehrere Klassen haben, getrennt durch Leerzeichen: class="hinweis wichtig".
• Groß- und Kleinschreibung zählen: .Hinweis trifft class="hinweis" nicht.
• Benenne Klassen nach ihrer Aufgabe, nicht nach ihrem Aussehen: .hinweis bleibt richtig, wenn der Text einmal nicht mehr grau ist, .grau nicht.

Klassen sind dein wichtigstes Werkzeug in CSS.

Drei Orte für CSS

Du hast den üblichen Weg kennengelernt. Insgesamt gibt es drei Orte, an denen CSS stehen kann.

Ort	Schreibweise	Einsatz
eigene Datei	<link rel="stylesheet" href="stil.css">	der Normalfall: Eine Änderung wirkt auf allen Seiten, und der Browser speichert die Datei zwischen
im Dokument	<style> … </style> im head	für Experimente und Einzelfälle; gilt nur für diese Seite
am Element	<p style="color: teal">	nur in Ausnahmefällen: gilt nur für dieses Element und lässt sich schwer überschreiben

Live-Coding: Das erste Stylesheet

Wir gehen die vier Schritte an der Vereinswebsite durch:

1. stil.css anlegen und in allen Seiten einbinden.
2. Mit einer Probe-Regel prüfen, ob die Verbindung steht, dann die Grundschrift am body festlegen.
3. Überschriften über Elementselektoren einfärben.
4. Die Klasse hinweis im HTML vergeben und im CSS gestalten.

stil.css

/* Grundschrift und Textfarbe: werden an alle Elemente vererbt */
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  color: #1c2330;
}

/* Elementselektoren: gelten für alle Überschriften dieser Ebene */
h1 {
  color: #0f766e;
}

h2 {
  color: #0f766e;
}

/* Klassenselektor: nur für Elemente mit class="hinweis" */
.hinweis {
  color: #55606e;
  font-style: italic;
}

Übung

Starter für die Übung

⤓ uebung-06-erste-regel.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, termine.html

Erweitere stil.css und prüfe nach jedem Schritt das Ergebnis im Browser.

Stufe 1: Elementselektoren

Schreibe eine Regel, die den footer grau färbt. Schreibe eine zweite, die jede figcaption kursiv stellt (font-style: italic).

Stufe 2: Mehrere Deklarationen

Mache den footer zusätzlich kleiner (font-size: 0.9rem). Lösche dann testweise das Semikolon hinter der ersten Deklaration. Was passiert, und was zeigen die DevTools im Styles-Bereich an? Stelle es wieder her.

Stufe 3: Klassen

Vergib auf der Startseite dem Listeneintrag „Kostenloses Probetraining“ die Klasse wichtig, und mache sie im CSS fett und türkis. Überlege, warum .wichtig ein besserer Name ist als .fett.

Für Schnelle

Untersuche in den DevTools eine h1 auf einer Seite ohne stil.css, zum Beispiel, indem du die link-Zeile auskommentierst. Finde im Styles-Bereich die Regeln des Browsers („user agent stylesheet“). Welche Schriftgröße und welche Abstände setzt der Browser?