Loading...

CSS Text

You have sized boxes and controlled overflow. Now shape the words inside. CSS text properties handle alignment, underlines, letter case, spacing between letters, and the height of each line — without changing the font family yet (that comes next).

Everyday text tools

📊 Common text properties

Property Everyday job
text-align Aligns text in its line box: left, right, center, justify
text-decoration Adds or removes underline, overline, or line-through
text-transform Changes letter case: uppercase, lowercase, capitalize
line-height Sets the height of each line — key for readable paragraphs
letter-spacing Adjusts space between letters

Align the text

text-align places text along the horizontal axis of its containing block.

Center a heading

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

Decoration — underline and friends

text-decoration draws lines on text. Links often start underlined; you can remove that with none, or add underline / line-through when the design needs it.

Decoration samples

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

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

.note {
text-decoration: underline;
}

Transform letter case

text-transform changes how letters appear without rewriting the HTML text.

Case transforms

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

.city {
text-transform: capitalize;
}

Line height for readable paragraphs

line-height controls the vertical rhythm of lines. Unitless values like 1.5 scale with the font size and are a calm default for body text.

Comfortable line height

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

Letter spacing — a light touch

A little letter-spacing can open a short heading. Keep body paragraphs mostly natural unless the design truly needs it.

Heading with light tracking

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

Try it yourself

  1. Center an h1 with text-align: center.
  2. Remove a link underline with text-decoration: none, then add a hover underline if you like.
  3. Uppercase a small label with text-transform: uppercase.
  4. Set paragraph line-height to 1.6 and compare with 1.2.
  5. Nudge a heading with a small letter-spacing — then check it still feels readable.

Common mistakes

  • Using text-align: center hoping to center a whole block layout (that is a layout job, not only text)
  • Leaving every link underlined when the design wants quiet links — or removing underlines with no other affordance
  • Putting font-family and font-size work here (those belong in the Fonts lesson)
  • Huge letter-spacing on long paragraphs (hard to read)
  • Confusing text overflow ellipsis tools with these basics (later specialty)

Summary

  • text-align aligns text left, right, center, or justify
  • text-decoration adds or removes underlines and similar lines
  • text-transform changes letter case without editing HTML
  • line-height shapes paragraph readability
  • Light letter-spacing can polish short headings
  • Fonts come next; keep this lesson on how text sits and reads

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 26 of 35
Css Tutorial