CSS für das Aussehen

HTML sagt, was auf einer Seite steht. Wie die Seite aussieht, also ihre Farben, Schriften und Größen und wo alles sitzt, ist die Aufgabe einer zweiten Sprache: CSS.

Die Seite hat jetzt eine zweite Datei, style.css. Über dem Editor kannst du zwischen den Dateien wechseln. Die Seite verwendet die Datei durch eine einzige Zeile in ihrem Kopf:

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

Sie sagt dem Browser, dass die Stile dieser Seite in der Datei style.css stehen. So eine Datei heißt Stylesheet, und unseres sagt Folgendes:

body {
    font-family: Arial, sans-serif;
    background-color: lightyellow;
}

h1 {
    color: purple;
    font-size: 32px;
}

Ein Stylesheet ist eine Liste von Regeln. Jede Regel beginnt damit, was sie gestaltet: body ist die ganze Seite und h1 die Hauptüberschrift. Zwischen den geschweiften Klammern { und } stehen Zeilen der Form Eigenschaft: Wert;. Die ganze Seite hat also die Schrift Arial auf hellgelbem Hintergrund, und die Überschrift ist lila und 32 Pixel groß. Ein Pixel (px) ist ein winziger Punkt deines Bildschirms.

Farben kannst du mit ihren englischen Namen schreiben: red, orange, teal, crimson, gold, hotpink und viele mehr. Aber CSS ist streng: Wenn der Browser eine Zeile nicht versteht, zum Beispiel wegen eines Tippfehlers in der Farbe oder eines fehlenden px nach der Zahl, überspringt er sie einfach.