CSS Tutorial – Text mit CSS formatieren

Text mit CSS formatieren

CSS bietet zahlreiche Eigenschaften, um Text exakt so zu gestalten, wie Sie ihn benötigen: Farbe, Ausrichtung,
Abstände, Transformierungen, Dekorationen und vieles mehr. Diese Eigenschaften geben Ihnen volle Kontrolle über
das Erscheinungsbild von Buchstaben, Wörtern und ganzen Textabschnitten.

Die wichtigsten Eigenschaften sind:

• text-align
• text-decoration
• text-transform
• text-indent
• line-height
• letter-spacing
• word-spacing
• word-break / overflow-wrap (moderne Ergänzungen)

Schauen wir uns an, was diese Eigenschaften leisten.

Textfarbe (color)

Die Textfarbe eines Elements wird über die Eigenschaft color festgelegt. Der folgende Code setzt
die Standardfarbe der gesamten Seite:

body {
    color: #434343;
}
    

Obwohl color oft im Zusammenhang mit Textformatierung verwendet wird, handelt es sich um eine
eigenständige CSS-Eigenschaft. Mehr Details finden Sie im Kapitel über CSS-Farben.

Textausrichtung (text-align)

Mit text-align legen Sie fest, wie der Text eines Elements horizontal ausgerichtet wird:
links, rechts, zentriert oder im Blocksatz.

p {
    text-align: justify;
}
    

Beispiele:

• text-align: left; — Standardausrichtung
• text-align: center; — zentrierter Text
• text-align: right; — rechtsbündig
• text-align: justify; — Blocksatz

Textdekoration (text-decoration)

Mit text-decoration können Sie Text unterstreichen, durchstreichen oder überstreichen.

h1 {
    text-decoration: overline;
}
    

Unterstreichung bei Links entfernen

a {
    text-decoration: none;
    color: red;
}
    

Standardmäßig unterstreichen Browser Links und färben sie blau. Dies erleichtert Besuchern das Erkennen
klickbarer Inhalte.

a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
    

Texttransformation (text-transform)

Mit text-transform können Sie Text in Großbuchstaben, Kleinbuchstaben oder Titelcase verwandeln:

p {
    text-transform: uppercase;
}
    

Aus „Hallo Welt“ wird: HALLO WELT

Texteinzug (text-indent)

Mit text-indent wird die erste Zeile eines Absatzes eingerückt.

p {
    text-indent: 100px;
}
    

Buchstabenabstand (letter-spacing)

Mit letter-spacing lässt sich der Abstand zwischen einzelnen Zeichen ändern:

h1 {
    letter-spacing: -3px;
}
    

Wortabstand (word-spacing)

Mit word-spacing wird zusätzlicher Abstand zwischen Wörtern erzeugt:

p {
    word-spacing: 20px;
}
    

Zeilenhöhe (line-height)

Mit line-height lässt sich der vertikale Abstand zwischen Textzeilen steuern:

p {
    line-height: 1.2;
}
    

Wird eine einfache Zahl angegeben, multipliziert der Browser diese mit der Schriftgröße des Elements.