CSS Fundamentals

CSS Text Align and Decoration

⏱ 8 min read📖 Beginner

The text-align property controls where text sits horizontally inside its element. The text-decoration property adds or removes lines on text. The text-transform property controls capitalization. The letter-spacing property controls the space between characters.

h1 {
  text-align: center;
  letter-spacing: 4px;
}

a {
  text-decoration: none;
}

button {
  text-transform: uppercase;
}

Let me ask you something.

Have you ever looked at a hero section on a website and noticed that all the text is perfectly centered? The heading, the paragraph, the button — all sitting right in the middle of the screen. It feels balanced and intentional.

Or have you noticed that links on some websites do not have that default blue underline? Or that some buttons have text in all caps even though it was not typed that way?

All of that is controlled by three simple CSS properties. Text align, text decoration, and text transform. Let us go through each one.

CSS Text Align

Text align controls where your text sits horizontally inside its element. Left, right, center, or justified.

Both the heading and paragraph are now centered on the page.

Here are all the values you can use.

left — aligns text to the left. This is the default.
right — aligns text to the right.
center — centers the text.
justify — stretches the text so both left and right edges line up perfectly like a newspaper column.

💡

Justified text looks clean in print but on screens it can create awkward gaps between words especially on narrow containers or mobile screens. Most web designers stick to left aligned text for paragraphs and center for headings and hero sections. Justify is rarely used in modern web design.

CSS Text Decoration

Text decoration controls the lines that appear on your text. Underlines, overlines, line-throughs.

The most common use you will see is removing the default underline from links. By default every anchor tag has an underline. Most modern designs remove it.

The underline is gone. The link is still clickable but it looks like clean text now.

Here are all the values.

none — removes any decoration. Used most often on links.
underline — adds an underline. This is the default for links.
overline — adds a line above the text.
line-through — adds a line through the middle of the text. Great for showing a crossed out price.

💡

The line-through value is really useful for showing original prices next to sale prices. Like showing $99 crossed out next to a discounted $49. You will see this pattern everywhere on e-commerce sites.

CSS Text Transform

Text transform controls the capitalization of your text. You can make text uppercase, lowercase, or capitalize the first letter of every word — without actually changing the text in your HTML.

The HTML text stays exactly as you typed it but CSS displays it differently. Uppercase for the first, lowercase for the second, and every word capitalized for the third.

Here are all the values.

uppercase — ALL CAPS no matter what.
lowercase — all lowercase no matter what.
capitalize — First Letter Of Every Word Is Capitalized.
none — shows the text exactly as typed. This is the default.

💡

Using text-transform: uppercase on buttons and navigation links is a very common design pattern. It makes them feel more structured and intentional. But use it sparingly — all caps text in long paragraphs is hard to read and feels like shouting.

CSS Letter Spacing

While we are talking about text let us also cover letter spacing. It controls the space between individual characters.

The heading now has noticeable space between each letter giving it a wide airy feel. The paragraph has just a tiny bit of extra breathing room.

Negative values pull letters closer together.

h1 {
  letter-spacing: -2px;
}

That makes the letters feel tight and compressed which can look really bold and impactful on large headings.

💡

A small amount of letter spacing on uppercase text — around 2px to 4px — makes it look much more refined and professional. Try text-transform: uppercase combined with letter-spacing: 3px on a button or a label and see the difference it makes.

Building the Netflix Clone

Let us bring all of this together on our Netflix clone.

Everything is centered. The logo has wide letter spacing giving it that bold brand feel. The buttons are uppercase with a little letter spacing making them feel sharp and clickable. The page is really starting to come together.

In the next lesson I am going to show you line height — how to control the space between lines of text and why getting it right makes your page so much more comfortable to read. Come on in.

Learn about Line Height →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.