Schrift

Nachdem wir uns nun mit den wichtigsten Grundlagen von CSS beschäftigt haben, können wir nun damit anfangen, unsere ersten Formatierungen durchzuführen. Die ersten Formatierungen, welche wir uns nun genauer anschauen wollen, sind Schriftformatierungen.

Farbe

Die Eigenschaft zum Festlegen der Schriftfarbe ist color. Als Wert für die color-Eigenschaft sind alle Varianten zur Angabe der Farbe (Name, RGB, RGBA, HSL, HSLA) möglich.

h1
{
	color: blue;
}

p
{
	color: red;
}

Schriftart

Die Schriftart wird in CSS über die Eigenschaft font-family festgelegt. Dabei ist darauf zu achten, dass nur wenige Schriftarten als „Web Safe“ (websicher) gelten. Die geläufigsten Schriftarten, welche von den meisten Betriebssystemen unterstützt werden, sind Arial, Georgia, Helvetica, Tahoma, Times und Verdana. Schriftarten, welche Leerzeichen enthalten (z. B. Arial Black und Times New Roman), müssen in doppelte oder einfache Anführungszeichen gesetzt werden.

h1
{
	font-family: Arial;
}

p
{
	font-family: Times;
}

Für Websites sollten wir zudem nicht nur eine, sondern mehrere Schriftarten angeben. Dadurch gibt es einen sogenannten „Fallback“, d. h. wenn der Browser die erste Schriftart nicht finden kann, so versucht er die zweite zu verwenden, fehlt auch diese, so verwendet er die dritte usw.. Zudem empfiehlt es sich, als letzte Schriftart den Namen serif (für Serifen-Schriftarten) oder sans-serif (für „normale“ Schriftarten) anzugeben. Hierdurch hat der Browser die Möglichkeit, die Standard-Serifen-Schriftart oder die Standard-Schriftart zu verwenden, falls keine der angegebenen Schriftarten zur Verfügung steht. Dies sieht dann z. B. so aus:

h1
{
    font-family: Arial, Helvetica, sans-serif;
}

Schriftgröße

Die Schriftgröße wird über die Eigenschaft font-size festgelegt. Hier ist die Angabe in allen von CSS unterstützten Einheiten erlaubt. Zudem ist laut CSS-Spezifikation die Angabe der Schlüsselwörter medium, small, x-small, xx-small, smaller, large, x-large, xx-large und larger möglich. Diese sollten jedoch weitestgehend vermieden werden, da Browser diese Angaben unterschiedlich interpretieren können und es somit nicht gewährleistet ist, dass die Schriftgröße in allen Browsern gleich ist.

h1
{
	font-size: 40px;
}

p
{
	font-size: 20px;
}

Schriftstile

CSS erlaubt die Angabe verschiedener Schriftstile.

Die Eigenschaft font-weight legt die Gewichtung der Schrift fest. Als Werte sind normal und bold möglich. Die CSS-Spezifikation enthält noch weitere Werte für diese Eigenschaft, welche jedoch von den meisten Browsern nicht unterstützt werden. Über den Wert bold erhalten wir das gleiche Ergebnis, wie wenn wir den gewünschten Text in einem b-Element platzieren würden.

font-variant ist die Eigenschaft, mit welcher wir die Schrift als Kapitälchen (Kleinbuchstaben in Form von Großbuchstaben) darstellen können. Hierfür muss der Eigenschaft lediglich der Wert small-caps zugewiesen werden. Der Wert normal deaktiviert die Funktion und ist zudem der Standardwert der Eigenschaft.

Über die Eigenschaft word-spacing und letter-spacing lässt sich der Abstand zwischen Wörtern oder Zeichen ändern. Die Angabe erfolgt als Zahl mit einer der verfügbaren Einheiten. Über den Wert normal lässt sich die Standardeinstellung wieder herstellen. Der Abstand zwischen Wörtern ist laut CSS-Spezifikation 0.25em.

Möchten wir einen Text kursiv darstellen (sowie mit dem i-Element), dann können wir die Eigenschaft font-style und den Wert italic verwenden. Der Wert normal ist hier ebenfalls verfügbar und ist als Standardeinstellung anzusehen und sorgt dafür, dass der Text nicht kursiv dargestellt wird.

Mit der Eigenschaft text-decoration können wir unserem Text eine „Dekoration“ hinzufügen. Die „Dekoration“ erfolgt in Form eines unterstrichenen (underline), überstrichenen (overline) oder durchgestrichenen (line-through) Textes. Mit Hilfe des Werts none wird die „Dekoration“ entfernt. Verwendung findet diese Eigenschaft vor allem bei Links.

Als Letztes wollen wir noch die Eigenschaft text-transform vorstellen, welche es erlaubt, die Buchstaben eines Textes umzuformatieren. Der Wert uppercase stellt alle Zeichen als Großbuchstaben dar, der Wert lowercase hingegen als Kleinbuchstaben. Mit Hilfe des Werts capitalize werden alle Anfangsbuchstaben eines Worts in Großbuchstaben dargestellt. Die Standardeinstellung ist none, welche den Text normal und somit ohne Transformation darstellt.

h1
{
	font-weight: normal;
	text-transform: uppercase;
	text-decoration: underline;
}

p
{
	font-style: italic;
	font-variant: small-caps;
	letter-spacing: 1px;
	word-spacing: 10px;
}

Ausrichtung

Um einen Text auszurichten, gibt es in CSS die Eigenschaft text-align. Als Werte sind left (linksbündig), right (rechtsbündig), center (zentriert) und justify (Blocksatz) möglich.

Die Eigenschaft text-indent ermöglicht es, die erste Zeile einzurücken. Hierfür muss als Wert der Eigenschaft eine Zahl in Verbindung mit einer der bekannten Einheiten angegeben werden.

Mit Hilfe der Eigenschaft white-space kann die Darstellung von Leerzeichen und Umbrüchen gesteuert werden. Der Wert normal ist die Standardeinstellung und fasst alle Leerzeichen zu einem zusammen. Des Weiteren werden vom Browser automatisch Zeilenumbrüche durchgeführt. Der Wert nowrap führt dazu, dass keine automatischen Zeilenumbrüche durchgeführt werden. Mehrere Leerzeichen werden jedoch weiterhin durch ein einzelnes Leerzeichen ersetzt. Als weitere Werte stehen pre, pre-line und pre-wrap zur Verfügung. Bei pre und pre-wrap werden die Leerzeichen vom Browser beibehalten - bei pre-line nicht. Wird der Wert pre-line oder pre-wrap verwendet, so wird der Text umgebrochen, sobald es notwendig ist (wie bei normal). Der Wert pre verhält sich in Anbetracht auf Umbrüche so, dass ein Umbruch erst erfolgt, sobald dieser explizit notiert wurde. Des Weiteren ist darauf zu achten, dass pre, pre-line und pre-wrap bei Zeilenumbrüchen auf Umbrüche im HTML-Code reagieren. Die Werte verhalten sich also alle ähnlich wie das pre-Element.

Die Eigenschaft line-height gibt die Zeilenhöhe an. Die Angabe erfolgt hierbei oftmals in der em-Einheit. Natürlich sind aber auch Angaben in Pixel oder anderen Einheiten zulässig. Mit einem Wert von 1.2em und einer Schriftgröße von 15px, hätten wir einen Zeilenabstand von 3px.

h1
{
	text-align: center;
}

p
{
	text-indent: 25px;
	line-height: 1.5em;
}

b
{
	white-space: nowrap;
}

Textschatten

Um einem Text einen Schatten hinzuzufügen, gibt es die Eigenschaft text-shadow. Als Wert müssen 2 bis 4 Parameter angegeben werden. Der erste Parameter legt die horizontale Position und der zweite Parameter legt die vertikale Position fest. Der dritte Parameter gibt den sogenannten „Blur Radius“ an, bei welchem es sich um den Radius für das Weichzeichen handelt. Der vierte und letzte Parameter gibt die Farbe an. Hier sind neben Farbnamen natürlich auch wieder RGB- und HSL-Angaben möglich. Möchten Sie einem Text mehrere Schatten zuweisen, so können Sie nach den 2 bis 4 Parametern ein Komma notieren. Nach dem Komma werden dann wieder 2 bis 4 Parameter angegeben, welche sich jedoch dann auf den zweiten Schatten beziehen.

h1
{
	text-shadow: 6px 2px lime;
}

p
{
	text-shadow: 2px 2px 5px red;
}