Texte in CSS gestalten

Texte müssen zu Dekorationszwecken häufig mit Unterstrichen versehen werden. Es ist auch häufig notwendig, die Unterstriche zu entfernen. Beispielsweise stellen Browser die Texte bei Hyperlinks standardmäßig mit einem Unterstrich dar, die in manchen Situationen entfernt werden, z.B. wenn man mit dem Mauszeiger auf den Link zeigt (Hover). Solche und ähnliche Aufgaben können mit der Eigenschaft text-decoration bewerkstelligt werden.

Auf Websites werden die Groß- und Kleinbuchstaben der Texte standardmäßig so dargestellt, wie sie geschrieben wurden. Es kann notwendig sein, gewisse Texte zu transformieren, so dass sie z.B. nur in Groß- oder Kleinbuchstaben dargestellt werden, ohne dass man die Texte neu schreiben muss. Für solche Aufgaben kann man die Eigenschaft text-transform verwenden.

Die Elemente einer Website haben eine variable oder feste Breite. Die enthaltenen Texte werden normalerweise am Zeilenende automatisch umgebrochen und in der nächsten Zeile fortgeführt. Die Umbrüche erfolgen dabei an den Trennstellen, zu denen auch die Leerzeichen zählen. Es kann manchmal notwendig sein, das Verhalten zu ändern, sodass z.B. die Texte nicht umgebrochen werden. Für solche und ähnliche Zwecke kann man die Eigenschaft white-space verwenden.

Die einzelnen Wörter von Texten werden mit einem Leerzeichen voneinander getrennt, die zu gewissen Abständen zwischen den Wörtern führen. Die Größe der Abstände hängen von verschiedenen Faktoren ab, z.B. von der gewählten Schriftgröße, Schriftart oder vom verwendeten Browser. Man kann sie aber auch mit CSS beeinflussen und z.B. für einen größeren Wortzwischenraum sorgen. Hierfür kann man die Eigenschaft word-spacing verwenden.

Ähnlich wie bei den Abständen zwischen den Wörtern werden auch die Abstände zwischen den einzelnen Buchstaben von gewissen Faktoren beeinflusst. Auch Abstände zwischen den Buchstaben kann man mit CSS beeinflussen, z.B. um bestimmte Wörter in die Breite zu "strecken". Die Eigenschaft hierfür heißt letter-spacing.

Für eine bessere Optik wird die erste Zeile bei längeren Texten häufig etwas eingerückt dargestellt. Genauso wie in den meisten Schreibprogrammen hat man auch mit CSS die Möglichkeit, einen Erstzeileneinzug zu definieren. Hierbei verwendet man die Eigenschaft text-indent, die jedoch auch häufig dazu verwendet wird, um die 1. Zeile zu verstecken.

Wenn man Texte in Spalten setzt, dann nehmen sie automatisch den Platz innerhalb der Spalten ein und die Höhe richtet sich nach dem Inhalt. Um Texte auf Websites in Spalten zu setzen, musste man früher einen großen Aufwand betreiben. Das ist mittlerweile nicht mehr notwendig und ab CSS3 gibt es mehrere Möglichkeiten, um Texte in Spalten zu setzen.