Syllabus

CSS Text Properties: Alignment, Spacing, Decoration and Wrapping

Badar KhalilUpdated September 30, 2026 7 min read

CSS Text Properties: Color, Alignment, Spacing, Decoration and Wrapping

CSS text properties control how text looks and flows inside its box: color, alignment, line height, letter spacing, decoration, case and wrapping. Good text styling is the biggest factor in readability, so these properties matter in every project. This lesson separates properties that style the text itself from those that control fonts (covered in the next lesson).

What You Will Learn

color, text-align, text-indent and text-transform
line-height, letter-spacing and word-spacing
text-decoration and its longhand properties
Whitespace and wrapping: white-space, word-break, overflow-wrap, hyphens
vertical-align for inline content
Readable text: contrast, line length and line height guidelines

Text Color

The color property sets the foreground color of text and also the default color for borders and currentColor. It is inherited, so setting it on body colors all text. Use enough contrast: WCAG AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 18.66px bold).

text-align

left, right, center, justify: horizontal alignment of inline content inside a block.
start and end: direction-aware values that work in right-to-left languages such as Urdu and Arabic. Prefer them for international sites.
text-align aligns inline content, not the block itself. To center a block, use margin-inline: auto or Flexbox.
text-align: justify can create uneven gaps between words on narrow columns. Combine it with hyphens: auto or avoid it on small screens.
text-align-last controls the last line of a justified paragraph.

line-height

line-height sets the height of each line box. Use a unitless number such as line-height: 1.6, because the multiplier is inherited and recalculated per element. A fixed value like 24px or a percentage is inherited as a computed length and can cause overlapping text in children with larger fonts. Good defaults: 1.5 to 1.7 for body text, 1.1 to 1.3 for large headings. WCAG 1.4.12 asks that content still works when line height is set to at least 1.5 times the font size.

letter-spacing and word-spacing

letter-spacing adds or removes space between characters. Use em so it scales with the font size, for example 0.05em for uppercase labels and small negative values for large headings.
word-spacing changes space between words.
Never add letter spacing to cursive scripts such as Arabic or Urdu, because it breaks the joined letters.

text-transform

uppercase, lowercase, capitalize and none change how text is displayed without changing the HTML. The source text stays the same for copy-paste and screen readers. Note that capitalize only capitalizes the first letter of each word and does not follow title-case grammar rules.

text-indent

text-indent indents the first line of a block, like in printed books: text-indent: 2em;. A negative value with padding can create a hanging indent for lists and references.

text-decoration

The shorthand text-decoration combines line, style, color and thickness. Longhands:

text-decoration-line: underline, overline, line-through, none
text-decoration-style: solid, double, dotted, dashed, wavy
text-decoration-color
text-decoration-thickness
text-underline-offset: distance between text and underline. A value like 0.2em gives cleaner links.
text-decoration-skip-ink: auto (default) stops the underline from crossing letter descenders.

Keep underlines on links inside body text. Removing them hurts usability because color alone is not always enough to identify links.

Whitespace: white-space

normal: collapse spaces and wrap lines.
nowrap: collapse spaces but never wrap.
pre: preserve spaces and line breaks, never wrap (like the pre tag).
pre-wrap: preserve spaces and breaks, but wrap when needed. Great for user-entered text.
pre-line: collapse spaces, preserve line breaks.
break-spaces: like pre-wrap, but trailing spaces take space and can wrap.

Breaking Long Words

overflow-wrap: break-word (or anywhere): break an otherwise unbreakable word only if it would overflow the container. anywhere also affects min-content size, which helps in flex and grid.
word-break: break-all: break between any two characters. Useful for some CJK text but ugly for English.
word-break: keep-all: do not break inside CJK words.
hyphens: auto: let the browser add hyphens using the language dictionary. You must set the lang attribute on html for it to work. hyphens: manual only breaks at soft hyphens ().

vertical-align

vertical-align works on inline, inline-block and table-cell elements, not on block elements. Values like middle, baseline, sub, super, top and bottom align an inline box relative to the line. It is often used to fix the gap under images (img { vertical-align: middle; } or display: block). To center a block vertically use Flexbox or Grid, not vertical-align.

Readable Text Guidelines

Line length: about 45 to 75 characters per line. Use max-width: 65ch;.
Line height: about 1.5 to 1.7 for paragraphs.
Font size: at least 16px (1rem) for body text.
Left or start aligned body text is easiest to read. Avoid long centered paragraphs.
Keep enough contrast and avoid pure #000 on pure #fff if it feels harsh. Dark gray such as #1f2937 is often more comfortable.

Common Mistakes

Using a unit on line-height such as line-height: 24px on body and breaking larger children.
Expecting text-align: center to center a block element.
Using text-transform to change meaning (screen readers may still read the original).
Removing link underlines without another clear cue.
Applying letter-spacing to Arabic-script text.
Expecting hyphens: auto to work without a lang attribute.

Frequently Asked Questions

What is the best line-height for body text?

Between 1.5 and 1.7, written as a unitless number.

How do I remove the underline from a link?

Use text-decoration: none, but keep another visual clue such as bold weight or a border, and keep underlines in paragraphs.

What is the difference between word-break and overflow-wrap?

overflow-wrap: break-word breaks only when a word would overflow. word-break: break-all breaks words aggressively even when they would fit.

Are text properties inherited?

Most are: color, text-align, line-height, letter-spacing, text-transform and white-space. text-decoration is not inherited but is drawn across child inline boxes.

Key Takeaways

Use unitless line-height (1.5 to 1.7) and a line length near 65ch.
Use text-align: start and end for international layouts.
Control wrapping with white-space, overflow-wrap and hyphens.
Style links with text-underline-offset and thickness instead of removing underlines.
Always check color contrast (4.5:1 minimum for body text).

Try it Yourself HTML

<style>
p { width: 320px; padding: 10px; border: 1px solid #ccc; margin: 6px 0; font-size: 15px; }
.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }
.j { text-align: justify; }
</style>
<p class='l'>left: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<p class='c'>center: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<p class='r'>right: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<p class='j'>justify: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.tight { line-height: 1; }
.good { line-height: 1.6; }
p { width: 300px; background: #f4f6f7; padding: 8px; font-size: 16px; }
</style>
<p class='tight'>line-height 1: lines are packed very tightly, which makes longer paragraphs harder to read.</p>
<p class='good'>line-height 1.6: lines have room to breathe, which is comfortable for body text.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; color: #566573; }
.title { letter-spacing: -0.02em; font-size: 2rem; margin: 4px 0; }
.spaced { word-spacing: 0.4em; }
</style>
<div class='label'>Category label</div>
<h2 class='title'>Tight large heading</h2>
<p class='spaced'>Extra word spacing example sentence.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
a.fancy {
  color: #1a5fb4;
  text-decoration: underline wavy #e74c3c;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.strike { text-decoration: line-through; color: #888; }
.over { text-decoration: overline dotted; }
</style>
<p><a class='fancy' href='#'>Styled underline link</a></p>
<p class='strike'>Old price $99</p>
<p class='over'>Overline with dotted style</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
div { width: 260px; border: 1px solid #999; padding: 6px; margin: 6px 0; font-family: monospace; font-size: 13px; }
.n { white-space: normal; }
.nw { white-space: nowrap; overflow: hidden; }
.p { white-space: pre; overflow: auto; }
.pw { white-space: pre-wrap; }
.pl { white-space: pre-line; }
</style>
<div class='n'>normal:   spaces   collapse
and lines wrap</div>
<div class='nw'>nowrap: this text never wraps onto a new line</div>
<div class='p'>pre:   spaces   and
line breaks are kept</div>
<div class='pw'>pre-wrap:   spaces kept and long lines still wrap when needed</div>
<div class='pl'>pre-line: spaces   collapse
but line breaks stay</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.box { width: 180px; border: 2px solid #8e44ad; padding: 8px; margin: 8px 0; }
.bw { overflow-wrap: break-word; }
.ba { word-break: break-all; }
.hy { hyphens: auto; }
</style>
<div class='box'>Default: https://example.com/a-very-long-unbreakable-url-that-overflows</div>
<div class='box bw'>break-word: https://example.com/a-very-long-unbreakable-url-that-wraps</div>
<div class='box ba'>break-all: words are broken anywhere they reach the edge.</div>
<div class='box hy' lang='en'>hyphens auto: incomprehensibilities and internationalization</div>

Output

Press Run to execute.

Try it Yourself CSS

/* Typography base for readable body text */
/* Set lang on the html element in HTML: <html lang="en"> so hyphens: auto works */
body {
  color: #1f2937;
  font-size: 1rem;
  line-height: 1.6;
  text-align: start;
}
.prose {
  max-width: 65ch;
  text-indent: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}
.prose a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

Output

Press Run to execute.

Exercise: Style a Readable ParagraphHTML

Style the .article paragraph for comfortable reading: a maximum line length of 65 characters, a unitless line height of 1.6, left aligned text (use the direction-aware value) and dark gray text color #1f2937.

Try it Yourself HTML

<style>
.article { /* your CSS here */ }
</style>
<p class='article'>Good typography is invisible. The reader should never think about line length, spacing or contrast because the text simply feels easy to read from the first line to the last, even on a very wide screen.</p>

Output

Press Run to execute.

Show expected output

The paragraph is at most 65ch wide with line-height 1.6, start alignment and color #1f2937.

This is a self-check — compare your result with the expected output above.

Exercise: Uppercase Label with SpacingHTML

Turn the .tag into an uppercase label with letter spacing of 0.1em, bold weight and a dotted underline that is 2px thick and offset 0.25em from the text.

Try it Yourself HTML

<style>
.tag { font-size: 0.85rem; /* your CSS here */ }
</style>
<span class='tag'>new feature</span>

Output

Press Run to execute.

Show expected output

The text shows as NEW FEATURE with 0.1em letter spacing, bold weight and a dotted 2px underline.

This is a self-check — compare your result with the expected output above.

Exercise: Count Wrapped LinesJAVASCRIPT

Write a function lineCount(text, maxChars) that splits text into words and returns how many lines are needed if each line can hold at most maxChars characters (spaces count, words are never split, and assume no single word is longer than maxChars).

Try it Yourself JAVASCRIPT

function lineCount(text, maxChars) {
  // TODO: implement
}

console.log(lineCount('the quick brown fox', 10));
console.log(lineCount('css text wrapping is fun', 12));
console.log(lineCount('hello', 10));

Output

Press Run to execute.

Show expected output

2
3
1

This is a self-check — compare your result with the expected output above.

Was this page helpful?