1.6 Weitere CSS Regeln
Es gibt zahlreiche weitere CSS Regeln von denen wir uns jetzt ein paar ansehen. Die auf dieser Seite vorgestellten Regeln beziehen sich auf das Erscheinungsbild der Schrift.
Schriftgröße
Mit Hilfe der CSS Regel font-size lässt sich die Größe der Schrift ändern.
body {
font-size: 1rem;
}
Bei der Angabe der Größe benötigen Sie eine gültige Maßeinheit. Dabei haben Sie mehrere Möglichkeiten. Hier eine kleine Auswahl:
| px | Pixel | Absolute Einheit |
| rem | rem | Relatives Längenmaß |
| cm | Zentimeter | Physisches Maß |
Im weiteren Verlauf, wird für die Schriftgröße die Einheit rem genutzt.
Die Regel wird dem <body> Element zugeordnet. Nachkommen erben die Eigenschaft!
Dies sorgt im ganzen Dokument für ein einheitliches Aussehen.
Schriftstil
Mit Hilfe der CSS Regel font-family lässt sich der Stil der Schrift ändern.
body {
font-family: 'Armata', 'Verdana', 'Arial', 'Helvetica', sans-serif;
font-size: 1rem;
}
Bei dieser Regel können mehrere Schriftstile angegeben werden. Der erste Schriftstil der auf dem Zielrechner installiert ist, wird genutzt.
Auch diese Regel wird dem <body> Element zugeordnet. Nachkommen erben auch diese Eigenschaft!
Zeilenabstand
Mit Hilfe der CSS Regel line-height lässt sich der Zeilenabstand der Schrift ändern.
body {
font-family: 'Armata', 'Verdana', 'Arial', 'Helvetica', sans-serif;
font-size: 1rem;
line-height: 1.2;
}
Auch diese Regel wird dem <body> Element zugeordnet und an die Nachkommen vererbt.
1.6.1 Das HTML Dokument
Die obigen Regeln werden jetzt auf unser HTML Dokument angewendet! Der folgende Code wird
im <style> Block notiert. Die Überschriften erhalten eine eigene Schriftgröße
und Schriftfarbe. Beim Textabsatz wird lediglich die Schriftfarbe angepasst.
body {
font-family:'Armata', 'Verdana', 'Arial', 'Helvetica', sans-serif;
font-size: 1rem;
line-height: 1.2;
}
h1 {
font-size: 1.6rem;
color: #B40000;
}
p {
color: grey;
}
Anschließend sieht unser HTML Dokument folgendermaßen aus.
