CSS text properties control the visual formatting of text content—including color alignment, text decoration, case transformation, line height, letter spacing, and text shadow effects.
CSS provides dedicated properties for formatting typography:
p {
color: #f8fafc;
text-align: left; /* left | right | center | justify */
text-decoration: underline; /* none | underline | line-through */
text-transform: uppercase; /* uppercase | lowercase | capitalize */
letter-spacing: 0.05em; /* Horizontal space between letters */
line-height: 1.6; /* Vertical spacing between lines */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
Property usages:
text-align: Aligns inline text horizontally inside a block container.text-decoration: Controls underline, overline, and strike-through decoration lines.text-transform: Capitalizes, uppercases, or lowercases text automatically.line-height: Adjusts line height spacing for optimal reading comfort.letter-spacing: Adjusts horizontal character kerning.flowchart TD
A["text-align Options"] --> B["left (Standard LTR alignment)"]
A --> C["center (Centered headlines & badge labels)"]
A --> D["right (RTL or numerical table columns)"]
A --> E["justify (Stretches line spaces to fill container width)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Text Formatting Example</title>
<style>
.headline {
color: #38bdf8;
text-transform: uppercase;
letter-spacing: 0.1em;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.article-body {
line-height: 1.7;
color: #94a3b8;
max-width: 600px;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2 class="headline">Formatted Typography</h2>
<p class="article-body">
Setting a generous <code>line-height: 1.7</code> significantly improves body paragraph readability on web screens.
</p>
</body>
</html>
line-height between 1.5 and 1.7 for body text: Improves paragraph legibility compared to browser default tight line heights.text-decoration: none to strip link underlines: Remove default underlines on navigation menu links.text-align: justify on the web: Justified text creates uneven "rivers of whitespace" that confuse users with dyslexia.Create a CSS class .badge-text that sets text-transform: uppercase;, letter-spacing: 0.05em;, and font-weight: bold;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.