In diesem Teil des Stylesheets legen wir die Standarddarstellung von Elementen auf unserer Website fest. Dazu müssen wir unterscheiden zwischen »normalen« Elementen und »besonderen« Elementen. Wenn wir beispielsweise die Elemente vom Typ p betrachten, sehen wir, dass das gar nicht so einfach ist. Es gibt p-Elemente in der Sidebar, im Content und in der Fußzeile, und das Screendesign sieht vor, dass die Elemente an jeder Stelle anders aussehen. Was davon ist die Standarddarstellung?

Webautoren gehen üblicherweise so vor: Die Darstellung der Elemente im Content ist die Standarddarstellung. Das ist sinnvoll, wenn Sie sich noch einmal bewusst machen, dass der Content üblicherweise der größte (und wichtigste!) Bereich auf einer Webseite ist. Mit dem Content steht und fällt die ganze Seite. Ist er schlecht ausgezeichnet und mies gestaltet, wird die Website dauerhaft nur wenige Besucher anlocken.

Beginnen wir mit den Überschriften und den Absätzen. Wir übernehmen Farben und Schriftgrößen aus dem Entwurf und schaffen ein wenig mehr Raum zwischen den einzelnen Elementen durch obere und untere Außenabstände.

/**
* Regeln für allgemeine Elemente
*
* @section Überschriften
*/
h1 {
  color: #9F0F00;
  background-color: white;
  font-size: 3em;
  line-height: 1.1;
  margin: .8em 0;
}
h2 {
  color: #3C6331;
  background-color: white;
  font-size: 1.5em;
  line-height: 1.1;
  margin: .8em 0;
  text-transform: uppercase;
}

/**
* @section Absätze
*/
p { margin: .8em 0; }

Ist Ihnen aufgefallen, dass wir sowohl den Margin-Bereich als auch die Schriftgrößen in em angegeben haben, also in einer relativen Einheit? Ich habe nachgemessen, wie groß die Überschriften in der Photoshop-Datei sind: Überschriften erster Ordnung 36 px, Überschriften zweiter Ordnung 18 px. Das entspricht 300 Prozent und 150 Prozent der Standardschriftgröße 12 px – oder eben 3 em und 1,5 em.

0,8 em ist ein bewährter Standardwert für vertikale Außenabstände, gerade bei Absätzen. Geben wir diesen Wert zunächst einfach an; wir können ihn später immer noch anpassen.

Nun kümmern wir uns ein wenig um die Farben der Links in ihren jeweiligen Zuständen. Unbesuchte Links präsentieren sich in einem dunklen Rot, besuchte Links sind grau. Wird ein Link mit der Maus überfahren oder hat er den Fokus, leuchtet er orange auf. Bei aktiven Links tauschen wir die ursprüngliche Schriftfarbe in die Hintergrundfarbe: Wir deklarieren weiße Schrift auf rotem Hintergrund.

/**
* @section Links und Anker
*/
a:link {
  color: #980c02;
  background-color:transparent;
}
a:visited {
  color: #999;
  background-color: transparent;
}
a:hover, a:focus {
  color: #FF7700;
  background-color: transparent;
}
a:active {
  color: white;
  background-color: #980c02;
}

Damit sind wir für diesen Schritt fertig. In späteren Schritten werden wir die Regeln für allgemeine Elemente um Regeln für Listen, Tabellen und Formulare ergänzen.

Beginnen wir nun mit der Ausgestaltung der einzelnen Bereiche.

Abb. 8.15: Abbildung 8.15: Schritt 7