Ein Stylesheet für beide Seiten

Das HTML beider Seiten ist fertig. Jetzt kommt das Aussehen. Beide Seiten bekommen es aus einem Stylesheet, style.css, das wir in den Editor gelegt haben, vorerst leer. Wie du aus dem CSS-Kurs weißt, ist das der Vorteil eines externen Stylesheets: Wenn du eine Regel änderst, ändern sich beide Seiten auf einmal, und sie sehen immer wie Teile einer Website aus.

Dafür muss jede Seite das Stylesheet mit dem Element link in ihrem head einbinden:

<link rel="stylesheet" href="style.css">

Dann kommt die Regel für body, mit allem, was die ganze Seite erbt:

• margin: 0 entfernt den Außenabstand, den Browser dem body geben, damit Header und Footer, die eine Hintergrundfarbe bekommen, bis an den Rand des Fensters reichen.
• font-family: Arial, sans-serif: Arial ist auf fast jedem Computer vorhanden, und wenn es fehlt, nimmt der Browser eine andere serifenlose Schrift.
• line-height: 1.5 gibt den Zeilen etwas mehr Platz, damit der Text leichter zu lesen ist.
• Die Textfarbe #1f2937, ein sehr dunkles Grau, das für die Augen angenehmer ist als Schwarz, und die Hintergrundfarbe #fdf8f0, ein warmes Creme wie bei alten Kinokarten. Wenn du magst, wähle eigene Farben: Der Text sollte nur dunkel auf hellem Grund bleiben.

Probiere nach dem Klick auf Ausführen die Links in der Vorschau aus: Die Programmseite hat dieselbe Schrift und dieselben Farben wie die Startseite.