Lädt...

CSS Text

Sie haben Boxen bemessen und Overflow gesteuert. Jetzt formen Sie die Wörter darin. CSS-Texteigenschaften steuern Ausrichtung, Unterstreichung, Groß-/Kleinschreibung, Buchstabenabstand und Zeilenhöhe — noch ohne die Schriftfamilie zu wechseln (das kommt als Nächstes).

Alltägliche Textwerkzeuge

📊 Häufige Texteigenschaften

Eigenschaft Alltagsjob
text-align Richtet Text in der Zeile aus: left, right, center, justify
text-decoration Fügt Unter-, Über- oder Durchstreichung hinzu oder entfernt sie
text-transform Ändert die Schreibweise: uppercase, lowercase, capitalize
line-height Setzt die Höhe jeder Zeile — Schlüssel für lesbare Absätze
letter-spacing Stellt den Abstand zwischen Buchstaben ein

Text ausrichten

text-align platziert Text entlang der horizontalen Achse seines Containers.

Überschrift zentrieren

css
CSS Code 
.hero-title {
text-align: center;
color: #0f172a;
}

Dekoration — Unterstreichung und Freunde

text-decoration zeichnet Linien am Text. Links sind oft unterstrichen; entfernen Sie das mit none, oder setzen Sie underline / line-through, wenn das Design es braucht.

Dekorationsbeispiele

css
CSS Code 
.link-quiet {
text-decoration: none;
color: #2563eb;
}

.sale {
text-decoration: line-through;
color: #64748b;
}

.note {
text-decoration: underline;
}

Schreibweise transformieren

text-transform ändert die Darstellung der Buchstaben, ohne den HTML-Text umzuschreiben.

Schreibweisen-Transformationen

css
CSS Code 
.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}

.city {
text-transform: capitalize;
}

Zeilenhöhe für lesbare Absätze

line-height steuert den vertikalen Rhythmus der Zeilen. Einheitslose Werte wie 1.5 skalieren mit der Schriftgröße und sind eine ruhige Wahl für Fließtext.

Angenehme Zeilenhöhe

css
CSS Code 
.article p {
line-height: 1.6;
color: #334155;
}

Buchstabenabstand — mit leichter Hand

Etwas letter-spacing kann eine kurze Überschrift öffnen. Fließtext-Absätze meist natürlich lassen, außer das Design verlangt es wirklich.

Überschrift mit leichtem Tracking

css
CSS Code 
.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}

Selbst ausprobieren

  1. Zentrieren Sie ein h1 mit text-align: center.
  2. Entfernen Sie die Link-Unterstreichung mit text-decoration: none, optional Hover-Unterstreichung.
  3. Machen Sie ein kleines Label mit text-transform: uppercase groß.
  4. Setzen Sie Absatz-line-height auf 1.6 und vergleichen Sie mit 1.2.
  5. Geben Sie einer Überschrift kleines letter-spacing — prüfen Sie die Lesbarkeit.

Häufige Fehler

  • Mit text-align: center hoffen, ein ganzes Block-Layout zu zentrieren (Layout-Job, nicht nur Text)
  • Jeden Link unterstrichen lassen, wenn das Design ruhige Links will — oder Unterstreichung ohne anderen Hinweis entfernen
  • font-family- und font-size-Arbeit hier erledigen (gehört in die Fonts-Lektion)
  • Riesiges letter-spacing auf langen Absätzen (schwer lesbar)
  • Text-Overflow-Ellipsis-Tools mit diesen Grundlagen verwechseln (später)

Kurzfassung

  • text-align richtet Text links, rechts, mittig oder justify aus
  • text-decoration fügt Unterstreichungen und ähnliche Linien hinzu oder entfernt sie
  • text-transform ändert die Schreibweise ohne HTML-Bearbeitung
  • line-height prägt die Absatzlesbarkeit
  • Leichtes letter-spacing kann kurze Überschriften polieren
  • Schriften kommen als Nächstes; diese Lektion bleibt bei Sitz und Lesbarkeit des Textes

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 26 von 35
Css Tutorial