Text Alignment and Decoration

Text Alignment and Decoration (Beginner Guide)

If you're just starting with HTML and CSS, text can feel a bit boring at first. The good news is that with a few simple rules, you can control where your text sits on the page and how it looks (underlined, uppercase, colorful, and more).

In this guide, you'll learn how to:

Align text left, right, center, or justify
Add and remove underlines
Style links so they look the way you want
Combine these skills into a simple web page

No prior coding experience is needed. You’ll copy, paste, and tweak small examples and see instant results.

Getting Ready: Your Simple Setup

To follow along, you only need:

A text editor (Notepad, VS Code, or any basic editor)
A web browser (Chrome, Firefox, Edge, etc.)

We’ll create a basic HTML file and add CSS (the language that styles web pages) inside it.

Create a file named text-styles.html and add this starting code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Text Alignment and Decoration</title>
  <style>
    /* We'll add our CSS rules here */
  </style>
</head>
<body>
  <h1>My Text Styling Practice Page</h1>
  <p>We will style this text using CSS.</p>
</body>
</html>

Save the file, then double-click it to open it in your browser. You should see a simple heading and a paragraph.

1. Text Alignment: Left, Center, Right, and Justify

Text alignment controls where text sits horizontally:

Left: Starts at the left edge (default for most languages)
Center: In the middle
Right: Aligned to the right edge
Justify: Spreads text so both left and right edges are straight

We use the CSS property text-align to set this.

Example 1: Basic Text Alignment

Add this CSS inside the <style> tag of your file:

<style>
  /* Center the main heading */
  h1 {
    text-align: center; /* Moves the heading to the middle */
  }

  /* Left-align this paragraph (default, but shown for practice) */
  p.left-text {
    text-align: left; /* Text starts at the left side */
  }

  /* Right-align this paragraph */
  p.right-text {
    text-align: right; /* Text lines up on the right side */
  }

  /* Justify this paragraph */
  p.justified-text {
    text-align: justify; /* Both left and right sides are straight */
  }
</style>

Now update the <body> to use these classes:

<body>
  <h1>My Text Styling Practice Page</h1>

  <p class="left-text">This text is aligned to the left. This is the most common alignment for paragraphs.</p>

  <p class="right-text">This text is aligned to the right. You might use this for dates, prices, or small details.</p>

  <p class="justified-text">
    This text is justified. The browser will adjust the spacing between words so that both sides of the paragraph line up in a straight column.
  </p>
</body>

What you should see:

The heading centered at the top
The first paragraph left-aligned
The second paragraph right-aligned
The third paragraph stretched so both sides look straight

Try it yourself

Change text-align: center; for the <h1> to right or left. Save and refresh. Notice how one small change moves the entire heading.

2. Text Decoration: Underlines, Lines Through, and More

Text decoration controls lines drawn on the text:

Under the text
Over the text
Through the text (like crossing it out)

We use the CSS property text-decoration for this.

Example 2: Playing with `text-decoration`

Add this CSS inside <style>:

<style>
  h1 {
    text-align: center;
  }

  /* Underlined text */
  p.underlined {
    text-decoration: underline; /* Draws a line under the text */
  }

  /* Line through text */
  p.line-through {
    text-decoration: line-through; /* A line across the middle */
  }

  /* Line above the text */
  p.overline {
    text-decoration: overline; /* A line above the text */
  }

  /* Remove decoration completely */
  p.no-decoration {
    text-decoration: none; /* No lines at all */
  }
</style>

Then update the <body> content (you can keep or replace earlier paragraphs):

<body>
  <h1>Text Decoration Examples</h1>

  <p class="underlined">This text has an underline. It can help highlight important words.</p>

  <p class="line-through">This text has a line through it, often used for old prices or removed items.</p>

  <p class="overline">This text has a line above it. It's less common but good to know.</p>

  <p class="no-decoration">This text has no decoration at all, just plain text.</p>
</body>

What you should see: four paragraphs, each demonstrating a different line effect.

Try it yourself

Change text-decoration: underline; to text-decoration: overline underline;. Yes, you can combine them! Refresh the page to see the result.

3. Styling Links: Removing and Adding Underlines

By default, most browsers show links as blue and underlined. Sometimes you want to remove the underline or change it.

We can target links using the a selector in CSS (because links use the <a> tag).

Example 3: Custom Link Styles

Add this CSS inside <style>:

<style>
  /* Remove underline from all links and change color */
  a {
    text-decoration: none; /* No underline */
    color: blue;          /* Link text color */
  }

  /* Add underline when hovering over a link */
  a:hover {
    text-decoration: underline; /* Underline appears when mouse is over the link */
  }
</style>

Now update your <body> to include a link:

<body>
  <h1>Styled Links</h1>

  <p>
    Visit
    <a href="https://www.example.com">Example Website</a>
    to see more practice ideas.
  </p>
</body>

What you should see:

The link appears without an underline.
When you move your mouse over it, the underline appears.

This simple trick makes links feel more modern while still letting users know they are clickable.

Try it yourself

Change the link color in the a rule from blue to green or red. You can also change text-decoration: underline; in a:hover to overline just to see how it looks.

4. Combining Alignment and Decoration

Now let’s put everything together into a small, neat layout. We’ll center a title, add a subtitle with decoration, and style some paragraphs and links.

Example 4: A Simple Styled Section

Replace the entire content of your file with this complete example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Text Alignment and Decoration Demo</title>
  <style>
    /* Center and underline the main heading */
    h1 {
      text-align: center;
      text-decoration: underline; /* Highlight the main title */
    }

    /* Center subtitle with no decoration */
    h2 {
      text-align: center;
      text-decoration: none;
      font-weight: normal; /* Slightly softer than h1 */
    }

    /* Justified main paragraph for a clean block of text */
    p.main-text {
      text-align: justify;
    }

    /* Right-aligned note */
    p.note {
      text-align: right;
      text-decoration: overline; /* A subtle line above the note */
    }

    /* Link styles */
    a {
      text-decoration: none; /* No underline by default */
      color: darkblue;
    }

    a:hover {
      text-decoration: underline; /* Underline on hover for clarity */
    }
  </style>
</head>
<body>
  <h1>Welcome to My Practice Page</h1>
  <h2>Learning text alignment and decoration with CSS</h2>

  <p class="main-text">
    This is a sample paragraph that shows how justified text looks on a web page.
    Notice how both the left and right edges form a fairly straight line.
    As you learn more CSS, you'll be able to combine alignment, colors, fonts,
    and spacing to create pages that are easy and fun to read.
  </p>

  <p class="main-text">
    Want to keep practicing? Search for beginner CSS tutorials or visit
    <a href="https://developer.mozilla.org/">MDN Web Docs</a>
    to explore more examples. Small experiments like this add up quickly—
    each one makes you more confident with code.
  </p>

  <p class="note">Last updated today by a new CSS learner.</p>
</body>
</html>

Open this file in your browser and read it like a real mini web page. You’ve now used:

text-align to control where text sits
text-decoration to control underlines and lines
Simple hover effects for links

Try it yourself

Change the text-decoration on the <h1> to overline or line-through. Which one feels better for a title? Play around—there’s no “wrong” choice while you’re learning.

Quick Recap and What’s Next

You’ve just taken an important step in learning how to control the look and feel of text on a web page. You now know how to:

Align text left, right, center, and justify with text-align
Add or remove underlines and other lines using text-decoration
Style links so they look clean but stay clearly clickable
Combine these ideas into a small, working example page

From here, a great next step is to explore font size, font family (which font is used), and line height (spacing between lines). These, along with alignment and decoration, will give you strong control over how your pages read and feel.

Keep experimenting, keep breaking and fixing your code, and remember: every small change you make is another step toward becoming comfortable with HTML and CSS.

Mudzinga