Die erste Website stylen

Styling - die erste CSS-Regel

CSS ist eine komplett eigene Sprache. In HTML gibt es spitze Klammern, in CSS geschweifte. Diese kannst du auf einem PC mit (AltGr) + (7) bzw. (0) und auf einem Mac mit (alt) + (8) bzw. (9) schreiben.

  1. Ergänze zwischen <head> und </head> den fett gedruckten style-Block:

<!DOCTYPE html>
<html>
<head>
<title>SfG - Webtechnik - 1. Lektion</title>
<style>
  body { background-color: #fff8e7; }
</style>
</head>

  1. Lasse den weiteren Quellcode unverändert. Speichere die Datei und betrachte Sie in einem Browser.

Die gesamte Gestaltungsanweisung von body bis zur schliessenden geschweiften Klammer nennt man CSS-Regel oder einfach Style. Mach dir über die Farbangabe #fff8e7 nicht zu viele Gedanken. Das kommt später genauer. Im Browser hat die Webseite jetzt einen beigefarbenen Hintergrund.

Es funktioniert. Und hier eine kurze Erklärung dazu:

  • Der Browser weiß, dass zwischen <style> und </style> CSS zur Gestaltung der Webseite steht.
  • Die CSS-Regel beginnt mit dem Namen des zu gestaltenden HTML-Elements. Der Name des Elements ist nicht <body>, sondern einfach nur body, ohne die spitzen Klammern.
  • Zwischen den geschweiften Klammern folgen eine oder mehrere Gestaltungsanweisungen, die jeweils mit einem Semikolon beendet werden. In diesem Fall ist es nur eine einzige, nämlich background-color: #fff8e7;.

Und schon hat die Webseite einen beigefarbenen Hintergrund.