Abstände und Schrift setzen

Wir wollen für das Design der Webseite als Schriftart Arial haben. Diese soll für alle Bereiche verwendet werden – also setzen wir die Schrift in dem Bereich, der alles umschließt, also im Bereich body:

body {
    text-align: center;
    background-image: url(bilder/duene.jpg);
    background-attachment: fixed;
    font-family: Arial, sans-serif;
}

Es können neben der gewünschten Schrift Arial auch weitere Schriften angegeben werden, falls diese gewünschte Schrift nicht auf dem Computer des Besuchers verfügbar ist. Diese werden mit Komma voneinander getrennt. Die Liste wird von links nach rechts durchgegangen und es wird versucht, ob eine der gewünschten Schriften im System verfügbar ist. Ist das nicht der Fall, kommt die Schriftfamilie zum Tragen und das System holt in unserem Beispiel eine serifenlose Schrift.

Wichtig ist es also, immer noch zum Schluss die Schriftfamilie anzugeben. In unserem Beispiel oben sans-serif. Somit wird wenigsten eine Schrift angezeigt, die in die Richtung des ursprünglich geplanten Designs geht, wenn alle Schriften nicht verfügbar sind.

Jetzt stürzen wir uns auf die Abstände. Diese (sowohl Innen- wie Außenabstände) haben wir über den Universalselektor komplett auf 0 gesetzt, damit wir nicht von unterschiedlichen Browsern Überraschungen durch unerwünschte Abstände erleben.

Allerdings müssen wir nun die Abstände einmal für alle benötigen Elemente setzen. Im Bereich <section> setzen wir nun für die Überschriften <h1> die entsprechenden Abstände. Der Abstand nach unten wird relativ über die Einheit em gesetzt:

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
}

Jetzt wird die Überschrift noch mit einer Farbe versehen – dazu bietet sich an aus einem bestehenden Bild (in unserem Fall der Fennek oben im Kopf) einfach die Farbe zu nehmen. Dazu kann man bei dem Editor Scriptly über die Pipette eine Farbe auswählen, oder über ein Bildbearbeitungsprogramm sich die Farbe heraussuchen.

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    color: #dd9661;
}

Das Ergebnis im Browser:

Jetzt werden wir den Absätzen Abstände mitgeben. Alle Absätze bekommen den relativen Abstand von 1em.

section p {
    padding-bottom: 1em;
}

Auch die Überschrift <h2> hat die Farbe wie <h1> und hält nach oben wie nach unten Abstand

section h2 {
    color: #dd9661;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

Jetzt stürzen wir uns auf die Aufzählung. Besonders fallen die Aufzählungszeichen auf! Die Aufzählungspunkte befinden sich links versetzt.

Die Punkte sollen einrücken, also über padding-left:

section ul {
    padding-left: 3em;
}

Die einzelnen Punkte sollen nun auch einen Abstand zum folgenden Aufzählungspunkt bekommen. Dazu verwenden wir das Element <li> im Inhalts-Bereich:

section li {
    padding-bottom: 0.5em;
}

Und dadurch haben wir die Abstände im Inhaltsbereich sauber gesetzt.