CSS INTENSIVSTATION

Text-Styling

Text-Styling beschreibt die visuelle Gestaltung von Text durch Farbe, Ausrichtung, Dekoration, Transformation und Schatten-Effekte. Es geht darum, wie Text aussieht und wirkt, nicht welche Schrift verwendet wird.

color

Textfarbe

Die color-Eigenschaft legt die Farbe des Textes fest. Sie gehört zu den am häufigsten verwendeten CSS-Eigenschaften.

p { color: #3498db;}

Alle Farbformate (Hex, RGB, HSL) und ihre Anwendung werden ausführlich erklärt unter: Farben in CSS

Barrierefreiheit: Ausreichender Kontrast zwischen Text und Hintergrund ist wichtig. Der WCAG-Standard empfiehlt ein Kontrastverhältnis von 4.5:1 für normalen Text und 3:1 für grossen Text (18pt+ oder 14pt+ fett).

Tools zum Prüfen

WebAIM Contrast Checker oder colorable

text-align

Textausrichtung

Mit text-align wird die horizontale Ausrichtung von Text innerhalb seines Containers bestimmt.

p { text-align: center;}

Werte

  • leftLinksbündig (Standard für LTR-Sprachen)
  • rightRechtsbündig
  • centerZentriert
  • justifyBlocksatz (beide Seiten bündig)
  • startAm Textanfang (bei LTR = links, bei RTL = rechts)
  • endAm Textende (bei LTR = rechts, bei RTL = links)
  • text-align-last Steuert die Ausrichtung der letzten Zeile (z. B. bei Blocksatz)

Hinweis: start und end richten sich nach der Schreibrichtung (direction). In links-nach-rechts-Sprachen (LTR) entspricht start meist left, in rechts-nach-links-Sprachen (RTL) dagegen right.

text-align: left;
Linksbündiger Text. Die Standardausrichtung in den meisten westlichen Sprachen.

text-align: right;
Rechtsbündiger Text. Wird oft für Zahlen in Tabellen verwendet.

text-align: center;
Zentrierter Text. Beliebt für Überschriften und kurze Texte.

text-align: justify;
Blocksatz. Der Text wird so verteilt, dass sowohl die linke als auch die rechte Kante bündig sind. Bei kurzen Zeilen können unschöne Lücken entstehen.

text-align-last steuert die Ausrichtung der letzten Zeile eines mehrzeiligen Textes. Die Eigenschaft wird hauptsächlich in Kombination mit text-align: justify verwendet und ist im modernen Webdesign eher selten.

Hinweis: justify funktioniert am besten mit langen Texten. Bei kurzen Zeilen entstehen oft zu grosse Wortabstände. Die Kombination mit hyphens: auto; kann bessere Ergebnisse liefern.

Wie Texte umbrechen steht unter Text Umbruch in CSS

text-decoration

Unterstreichungen & mehr

text-decoration ist eine Shorthand-Eigenschaft für mehrere Untereigenschaften. Sie ermöglicht Unterstreichungen, Überstreichungen, Durchstreichungen mit voller Kontrolle über Farbe, Stil und Dicke.

a {
  text-decoration: underline wavy red 2px;
}

text-decoration-line

Bestimmt, wo die Linie erscheint.

  • noneKeine Dekoration (Standard)
  • underline
    Unterstreichung
  • overline
    Überstreichung (Linie über dem Text)
  • line-through
    Durchstreichung

Über- und Unterstrichen kombiniert

The quick brown fox jumps over the lazy dog.

text-decoration: underline overline;

Kurzschreibweise

text-decoration ist eine Shorthand-Eigenschaft, die mehrere Werte kombinieren kann:

text-decoration: line | style | color | thickness;

Was kann kombiniert werden:

  • text-decoration-line (underline, overline, line-through)
  • text-decoration-style (solid, wavy, dotted, dashed, double)
  • text-decoration-color (Farbe)
  • text-decoration-thickness (Dicke)
  • text-underline-offset – muss separat geschrieben werden!

Beispiel:

/* line + color + thickness (style optional) */
text-decoration: underline #e74c3c 3px;

Funktioniert NICHT

text-decoration: underline dashed red 2px 5px;

Richtig

text-decoration: underline dotted red 2px;
text-underline-offset: 5px;

Wichtig: text-underline-offset funktioniert NICHT in der Kurzschreibweise:

text-decoration-style

Bestimmt, wie die Linie aussieht.

  • solid
    Durchgezogene Linie (Standard)
  • double
    Doppelte Linie
  • dotted
    Gepunktete Linie
  • dashed
    Gestrichelte Linie
  • wavy
    Wellenförmige Linie

The quick brown fox jumps.

text-decoration: line-through wavy;

text-decoration-color

Bestimmt die Farbe der Linie, unabhängig von der Textfarbe.

Roter Underline, schwarzer Text 

text-decoration: underline red;

Wellige rote Unterstreichung 

text-decoration: underline wavy red;

text-decoration-thickness

Bestimmt die Dicke der Linie.

Hauchdünne Linie

text-decoration: underline solid 1px;

Mittlere Linie

text-decoration: underline solid 3px;

Dicke rote Linie

text-decoration: underline red 5px;

text-underline-offset

Bestimmt den Abstand zwischen Text und Unterstreichung.

Kleiner Abstand 

text-decoration: underline;
text-underline-offset: 2px;

Mittlerer Abstand 

text-decoration: underline wavy red;
text-underline-offset: 5px;

Grosser Abstand, dicke pink Linie 

text-decoration: underline pink 3px;
text-underline-offset: 10px;

Praxis-Tipp für Links: Moderne Websites verwenden oft text-underline-offset, damit die Unterstreichung nicht zu nah am Text klebt.

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

text-decoration-skip-ink verhindert, dass Unterstreichungen Buchstabenformen wie g oder y schneiden.

text-transform

Gross-/Kleinschreibung

Mit text-transform wird die Gross- und Kleinschreibung von Text geändert, ohne den HTML-Inhalt zu verändern.

.uppercase {text-transform: uppercase;}

Werte

  • noneKeine Transformation (Standard)
  • capitalize
    Erster Buchstabe jedes Wortes gross
  • uppercase
    Alles in Grossbuchstaben
  • lowercase
    Alles in Kleinbuchstaben

Barrierefreiheit: Grossbuchstaben können die Lesbarkeit und Barrierefreiheit beeinträchtigen. Screenreader lesen Texte in uppercase teilweise buchstabenweise (z. B. „H-E-L-L-O“ statt „Hello“), abhängig von Screenreader und Einstellungen. Deshalb wird diese Schreibweise sparsam eingesetzt, etwa für kurze Überschriften oder Buttons.

Häufige Anwendung:

  • uppercase für Buttons oder Labels
  • capitalize für Überschriften aus Datenbanken
  • lowercase für E-Mail-Adressen (Normalisierung)

text-shadow

Schatten-Effekte

text-shadow fügt Schatten zu Text hinzu und ermöglicht Effekte wie Glühen, 3D-Text, bessere Lesbarkeit auf Bildern und mehr.

Syntax

text-shadow: offset-x | offset-y | blur-radius | color

Hinweis: offset-x und offset-y sind Pflichtwerte, blur-radius und color sind optional.

Die vier Werte

  • offset-xHorizontaler Versatz (+ = rechts, - = links) – Pflicht
  • offset-yVertikaler Versatz (+ = unten, - = oben) – Pflicht
  • blur-radiusUnschärfe (0 = scharf, höher = weicher) – Optional
  • colorSchattenfarbe – Optional
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

Kombinationen

  • text-shadow: 2px 2px ... → Schatten rechts-unten (klassisch)
  • text-shadow: -2px -2px ... → Schatten links-oben
  • text-shadow: 0 0 ... → Schatten zentriert (Glow-Effekt)

Beispiele

Scharfer Schatten

text-shadow: 2px 2px 0 red;

Leicht verschwommen

text-shadow: 2px 2px 5px red;

Stark verschwommen

text-shadow: 2px 2px 10px red;

Glow-Effekt

text-shadow: 0 0 20px red;

Klassischer Schatten

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

3D-EFFEKT

text-shadow: 
  1px 1px 0 #c0392b,
  2px 2px 0 #c0392b,
  3px 3px 0 #c0392b,
  4px 4px 0 #c0392b,
  5px 5px 0 #c0392b,
  6px 6px 10px rgba(0,0,0,0.4);

NEON GLOW

text-shadow: 
  0 0 10px #00f3ff,
  0 0 20px #00f3ff,
  0 0 30px #00f3ff,
  0 0 40px #00d4ff,
  0 0 70px #00d4ff,
  0 0 80px #00d4ff;

REGENBOGEN

text-shadow: 
  0 0 5px #ff0000,
  0 0 10px #ff7f00,
  0 0 15px #ffff00,
  0 0 20px #00ff00,
  0 0 25px #0000ff,
  0 0 30px #8b00ff;

Performance-Tipp: Viele text-shadow-Effekte können die Performance beeinträchtigen, besonders bei langen Texten. Komplexe Schatten werden daher eher für Überschriften und wichtige Elemente verwendet, nicht für Fliesstext.

text-indent

Erste Zeile einrücken

text-indent rückt die erste Zeile eines Textblocks ein – wie in klassischen Büchern.

p {
  text-indent: 2em;
}

Werte

  • pxPixel: text-indent: 30px;
  • emRelativ zur Schriftgrösse: text-indent: 2em;
  • %Prozent (relativ zur Container-Breite): text-indent: 10%;
  • negative WerteHängender Einzug: text-indent: -20px;

Beispiel

Dies ist ein Absatz mit einem Einzug von 40px. Nur die erste Zeile wird eingerückt, alle weiteren Zeilen beginnen normal am linken Rand. 

text-indent: 40px;

Praxis-Tipp: Hängende Einzüge sind geeignet für:

  • Bibliographien und Quellenangaben
  • Benutzerdefinierte Listen
  • Zitate mit Attributionen

Für Listen oder komplexe Layouts sind oft padding oder list-style-position besser geeignet als text-indent.

Kurz gesagt

  • color legt die Textfarbe fest (Named, Hex, RGB, RGBA, HSL)
  • text-align steuert die horizontale Ausrichtung (left, right, center, justify)
  • text-decoration ermöglicht Unterstreichungen mit voller Kontrolle über Stil, Farbe, Dicke und Offset
  • text-transform ändert Gross-/Kleinschreibung ohne HTML zu ändern
  • text-shadow fügt Schatten hinzu – für 3D, Glow, Lesbarkeit und mehr
  • text-indent rückt die erste Zeile ein (auch negativ für hängende Einzüge)
  • Barrierefreiheit wird durch ausreichenden Kontrast und sparsamen Einsatz von GROSSBUCHSTABEN gewährleistet