Texte formatieren

Textfamilie, Textfarbe, Abstände oder Größen. Mit Texten lassen sich so viel schöne Sachen machen. Ein paar Tags gibt es bereits dafür, wie <b> oder <strong> um den Text fett darzustellen. Für eine kursive Schrift gibt es <i> oder <em>. Mit CSS sind viel feinere Veränderungen zu machen. Angefangen bei der Schriftgröße welsche sich in verschiedenen Werten angeben lässt:

font-size: 3cm;
Es muss bloß die gewünschte Maßeinheit angehängt werden. In diesem Fall sind es die bekannten Längenangaben ind Zentimetern (cm). Es geht auch in Millimetern (mm) oder mit Zoll (in)

font-size: 20pt;
Aus der klassischen Typografie kommt die Einheit Pica (pc), doch sie kommt nur noch selten vor. Bekannter ist die Angabe in Punkten (pt) welche ebenfals aus der Typografie kommt. Auch Pixel (px) ist eine mögliche Größenangabe.

font-size: (eines der folgenden Wörter);
xx-small
x-small
small
medium
large
x-large
xx-large

Eltern und ihre Kinder

All diese Werte sind absolut, haben also eine feste Größe. Wenn sich das Layout in der Größe anpassen soll sind relative Angaben notwendig. Dessen Größe bezieht sich auf ihr Eltern-Element. Wenn zum Beispiel ein p-Tag direkt im body-Tag steht, ist der body-Tag das Elternteil und das p-Tag sein Kind. Wenn man nur relative Angaben macht, beziehen sie sich alle auf das html-Tag, also die komplette Seite. Sobald einmal ein absoluter Wert benutzt wird, ist diese Vererbung unterbrochen.

font-size: 120%;
Das heißt die Schrift ist um 20% größer als sein Elternteil.

font-size: 1.5em;
Diese Maßeinheit kommt aus dem Schriftsatz, es entpricht der Breite eines Gevierts (Maßeinheit aus der Zeit des Bleisatzes) Sein Wert wird mit dem Wert des Elternteils multipliziert. 1.5em wären dann gleichbedeutend mit 150%.

font-size: 1.5rem;
rem ignoriert seine Eltern. Es orientiert sich an der Standard-Schriftgröße. Das hat zur Forlge, dass es keine Auswirkung auf verschiedene ineinander verschachtelte Größenangaben hat. Es gibt also keinen Streß mit Verwanten.