Farben und Schrift

HTML sagt, was etwas ist. CSS sagt, wie es aussehen soll. Deshalb sind es zwei getrennte Dateien: Du kannst das Aussehen komplett austauschen, ohne den Inhalt anzufassen.

Der Aufbau einer Regel

h1 {
  color: darkblue;
  font-size: 40px;
}

Das liest sich als: Alle <h1> auf dieser Seite bekommen dunkelblauen Text in 40 Pixel Größe.

• h1 ist der Selektor — er sagt, wen es betrifft.
• In den geschweiften Klammern stehen die Eigenschaften.
• Jede Zeile ist eigenschaft: wert; — Doppelpunkt in der Mitte, Semikolon am Ende.

Das Semikolon vergisst jeder mindestens einmal. Wenn ab einer bestimmten Zeile nichts mehr wirkt, ist das der erste Verdacht.

Farben angeben

Es gibt mehrere Schreibweisen, alle drei bedeuten dasselbe Rot:

color: red;          /* Name — bequem, aber nur ~140 Stück */
color: #ff0000;      /* Hex — was du überall sehen wirst */
color: rgb(255 0 0); /* Zahlenwerte für Rot, Grün, Blau */

Bei Hex sind es drei Paare: Rot, Grün, Blau, jeweils von 00 bis ff. #000000 ist schwarz, #ffffff weiß.

Deine Aufgabe

Links im Editor sind jetzt zwei Tabs: start.html und start.css. Das HTML ist schon fertig — du schreibst nur im CSS.

Sorge dafür, dass:

1. die ganze Seite (body) eine andere Hintergrundfarbe als Weiß hat
2. die Überschrift h1 eine eigene Textfarbe bekommt
3. der Fließtext in den p mindestens 18px groß ist
4. die Seite eine andere Schriftart als die Standardschrift benutzt — setz font-family auf dem body

Such dir Farben aus, die du wirklich magst. Es gibt hier kein Richtig.