Text & Fonts›Core· 35 min read

Styling Text

Alignment, decoration, transformation and spacing — the controls that make text readable and attractive.

What you will learn

Align and decorate text
Transform letter case
Adjust line height and letter spacing

The everyday text properties

Property	Does	Example value
`text-align`	Alignment	`center`, `right`, `justify`
`text-decoration`	Underline / remove	`underline`, `none`
`text-transform`	Letter case	`uppercase`, `capitalize`
`line-height`	Space between lines	`1.6`
`letter-spacing`	Space between letters	`2px`

Alignment, case, spacing and decoration

<style>
  .title { text-align: center; text-transform: uppercase; letter-spacing: 3px; color:#4338ca; }
  .lead  { text-align: center; line-height: 1.8; color:#5b6178; }
  a.clean { text-decoration: none; color:#06b6d4; }
</style>
<h2 class="title">CodingClave</h2>
<p class="lead">Readable text uses generous line-height. This paragraph uses 1.8 so lines breathe.</p>
<a class="clean" href="#">A link with no underline</a>

Live preview

Each class shows off a different text control:

.title — text-align: center centres it, text-transform: uppercase forces CAPITALS even though the HTML is mixed-case, and letter-spacing: 3px pushes the letters apart for an airy heading.
.lead — line-height: 1.8 adds generous vertical space between lines so the paragraph is easy to read.
a.clean — text-decoration: none removes the underline that links normally have, leaving just coloured text.

Tip: For body text, a line-height around 1.5–1.8 dramatically improves readability. Cramped lines are the most common beginner mistake.

Q. Which property removes the underline from a link?

Answer: text-decoration: none removes the default underline from links (and other decorations).

✍️ Practice

Centre a heading, make it uppercase, and add letter-spacing.
Set a comfortable line-height on a paragraph and compare with the default.

🏠 Homework

Style all the text on your profile page: alignment, line-height and link decoration.