Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

5.5 Schriftart und -größe gestalten

In diesem Abschnitt gestalten Sie Schriftart und Schriftgröße für die
gesamte Webseite und für die Überschriften.

Grundlegende Schriftformatierung für die ganze Seite

Webseiten bestehen aus ineinander verschachtelten Kästchen, und für diese Kästchen gilt in CSS das sogenannte Vererbungsprinzip:

  • Alle Kästchen innerhalb von body erben die für body gemachten Schriftformatierungen.

body eignet sich also hervorragend zur Einstellung der grundlegenden Schriftgestaltung, denn sie wird an alle anderen Elemente weitergegeben.

ToDo: Schrifteinstellungen für die Webseite definieren
  1. Ergänzen Sie die vorhandene CSS-Regel für body wie folgt:

    body {
      background-color: #8c8c8c;
      color: white;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: small; /* Schriftgröße */
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Auf beiden Webseiten haben sich die Schrifteinstellungen geändert, und zwar für (fast) alle HTML-Elemente. Hier die beiden neuen Eigenschaften im Detail:

  • font-family definiert die Schriftart. Da Sie als Autor des Stylesheets nicht wissen, welche Schriftarten der Browser des Betrachters zur Verfügung hat, äußern Sie einfach mehrere Wünsche, jeweils durch Komma getrennt.
  • font-size gestaltet die Schriftgröße. Über die beste Methode zur Definition der Schriftgröße gibt es im Web intensive Diskussionen, aber für den Anfang ist small eine gute Grundlage.

Mehr zur Vererbung von CSS-Eigenschaften erfahren Sie im Kapitel über »CSS und der Browser: Kaskade, Vererbung oder Standardwert«.

Schriftgröße für Überschriften ändern

Alle Elemente haben eine andere Schriftgröße bekommen, mit Ausnahme der Überschriften. Browser sind der Meinung, dass Überschriften größer sein müssen als normaler Text, und da wir bis jetzt für die Überschrift nichts definiert haben, gilt noch immer das im Browser eingebaute Stylesheet.

Im folgenden ToDo definieren Sie die Schriftgröße für alle Überschriften der ersten und zweiten Gliederungsebene.

ToDo: Schriftgröße für die Überschriften ändern
  1. Schreiben Sie folgende Zeilen an das Ende des Stylesheets:

    h1 { font-size: 150%; }
    h2 { font-size: 130%; }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Die 150% für h1 haben momentan kaum sichtbare Auswirkungen, weil im Beispiel davon nur die Logo-Grafik betroffen ist, aber bei h2 können Sie die Änderung der Schriftgröße direkt sehen.

Die Angabe in Prozent bewirkt übrigens, dass das Größenverhältnis zwischen Text und Überschriften erhalten bleibt, wenn Sie die Schriftgröße für body ändern.