Text Alignment, Decoration, Transform, and Spacing0%

Absolute Units: Pixels (px), Points (pt)

Text Alignment, Decoration, Transform, and Spacing

Beginner9 min read•Updated: 2026-10-01

Text Alignment, Decoration, Transform, and Spacing

Have you ever wondered how websites remove the default blue underline from navigation links, make badge titles display in crisp ALL-CAPS without retyping them in HTML, or align paragraph edges neatly like a printed newspaper? 📰

In CSS, text layout is refined using properties that control:

Where lines align horizontally (text-align)
Underlines and strikethroughs (text-decoration)
Capitalization rules (text-transform)
Horizontal breathing room between letters and words (letter-spacing, word-spacing)

Let us explore these powerful properties through the lens of a school magazine editor!

The School Magazine Editor Analogy 🖋️

Imagine you are the chief student editor of your school's Annual Magazine:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE MAGAZINE EDITOR'S TOOLBOX                          |
+-------------------------------------------------------------------------+
| 1. text-align: center     --> Centering the Principal's message headline|
| 2. text-align: justify    --> Aligning both left & right edges of essays|
|                               neatly like a newspaper column            |
| 3. text-decoration: none  --> Removing ugly underlines from navigation  |
| 4. text-decoration:       --> Striking through old ticket prices        |
|    line-through               (Annual Day Pass: ~Rs. 100~ Free!)        |
| 5. text-transform:        --> Forcing badges to ALL-CAPS without typing |
|    uppercase                  every letter in caps manually in HTML     |
| 6. letter-spacing: 2px    --> Adding breathing room between capital     |
|                               letters for a luxury title feel           |
+-------------------------------------------------------------------------+

1. `text-align` (Horizontal Alignment)

Controls how text is positioned horizontally within its container.

1/* Left-aligned: Standard default for English/Hindi */
2p {
3  text-align: left;
4}
5 
6/* Centered: Best for headings, hero banners, and cards */
7h1 {
8  text-align: center;
9}
10 
11/* Right-aligned: Great for dates, table numbers, invoice totals */
12.date-meta {
13  text-align: right;
14}
15 
16/* Justified: Spaces words so both left and right edges align flush */
17.newspaper-article {
18  text-align: justify;
19}

2. `text-decoration` (Lines and Underlines)

By default, every web browser automatically draws an underline under <a> link tags. One of the very first things frontend developers do is remove or customize that underline!

1. Removing Link Underlines (`none` ⭐):

1a {
2  text-decoration: none; /* Clean links without underlines! */
3  color: #2563eb;
4}
5 
6/* Underline only when user hovers mouse over the link */
7a:hover {
8  text-decoration: underline;
9}

2. Common Decoration Values:

none: Removes all underlines or lines.
underline: Draws a line directly below the text.
line-through: Draws a line through the middle (perfect for e-commerce discounts: ~₹999~ ₹499).
overline: Draws a line above the text.

1/* E-commerce discount price */
2.original-price {
3  text-decoration: line-through;
4  color: #94a3b8;
5}
6 
7.discount-price {
8  color: #16a34a;
9  font-weight: bold;
10}

Modern Decorative Modifiers:

In modern CSS, you can even customize the color and wavy style of the line:

1/* Fancy red wavy underline */
2.highlight-error {
3  text-decoration: underline wavy #ef4444;
4}

3. `text-transform` (Smart Capitalization)

Why is text-transform a lifesaver? Imagine you have 100 buttons that need to display in uppercase. Instead of manually typing <button>SUBMIT APPLICATION</button> in HTML, you simply write normal sentence case in HTML and let CSS do the transformation!

1/* Converts every letter to UPPERCASE */
2.badge {
3  text-transform: uppercase;
4}
5 
6/* Capitalizes the first letter of each word */
7.student-name {
8  text-transform: capitalize;
9}
10 
11/* Forces all letters to lowercase */
12.email-address {
13  text-transform: lowercase;
14}

4. `letter-spacing` and `word-spacing`

These properties adjust the micro-spacing between letters and words:

1. `letter-spacing` (Tracking)

Expands or contracts the space between individual letters. It is widely used by UI designers on uppercase headers and small badges to give them a premium, airy aesthetic:

1/* Modern elegant badge */
badge-pill {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px; /* 2px extra space between each letter */
font-weight: 700;
7}

2. `word-spacing`

Controls the spacing between entire words:

1h2 {
2  word-spacing: 4px;
3}

5. `text-indent` (First-Line Indentation)

In printed storybooks and textbooks, the very first line of a new paragraph is often pushed inward by a few centimeters. In CSS, you achieve this using text-indent:

1/* Indents the first line of every paragraph by 30px */
2.story p {
3  text-indent: 30px;
4}

Common Beginner Mistakes (Do's and Don'ts)

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
Typing all caps directly in HTML (`<h1>ADMISSIONS</h1>`).	Use `text-transform: uppercase;`.	Keeping HTML in natural sentence case helps screen readers pronounce words correctly instead of spelling them out as abbreviations!
Using `text-align: center` on inline tags like `<span>`.	Apply `text-align` to the parent block element (like `<p>` or `<div>`).	Inline elements have no outer width to center within.
Forgetting `text-decoration: none` on button links.	Add `text-decoration: none;` to navigation `<a>` tags.	Without it, link buttons will show an unsightly underline across the button text.

Quick Revision Summary

text-align sets horizontal alignment: left, center, right, or justify.
text-decoration: none removes the default browser underline from links.
text-decoration: line-through strikes through text (ideal for discounted prices).
text-transform: uppercase converts text to capital letters cleanly through CSS.
letter-spacing adds breathing room between individual characters for refined titles.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Which CSS property and value is used to remove the default underline from an HTML <a> link?

Question 2

What is the effect of applying text-transform: capitalize; to the phrase "science and technology"?

Question 3

Which value of text-align adjusts the spacing between words so that text aligns flush with both the left and right margins, like a printed newspaper?

Question 4

Which CSS property adds extra breathing room specifically between individual characters in a heading?

Question 5

What CSS declaration is best suited to display a discounted strike-through price like "~₹500~ ₹299"?

Practice Challenge (Try It Yourself)

1
Open your code editor and create magazine-badge.html.
2
Build a modern event ticket card featuring all the text formatting techniques:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Magazine Typography Challenge</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 40px 20px;
       display: flex;
       justify-content: center;
     }
14 
     .event-card {
       max-width: 440px;
       background-color: white;
       border-radius: 12px;
       padding: 28px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
     }
22 
     /* 1. Category Pill Badge */
     .badge {
       display: inline-block;
       background-color: #dbeafe;
       color: #1e40af;
       padding: 6px 12px;
       border-radius: 50px;
       font-size: 11px;
       font-weight: bold;
       text-transform: uppercase;   /* Automatic ALL-CAPS */
       letter-spacing: 1.5px;       /* Tracking space */
       margin-bottom: 12px;
     }
36 
     /* 2. Main Title */
     h2 {
       color: #0f172a;
       text-transform: capitalize;  /* Capitalize every word */
       margin-bottom: 12px;
     }
43 
     /* 3. Description */
     p {
       color: #475569;
       line-height: 1.6;
       text-align: justify;         /* Clean newspaper alignment */
       margin-bottom: 20px;
     }
51 
     /* 4. Pricing */
     .pricing {
       margin-bottom: 20px;
       font-size: 18px;
     }
57 
     .old-price {
       text-decoration: line-through; /* Strikethrough */
       color: #94a3b8;
       margin-right: 10px;
     }
63 
     .new-price {
       color: #16a34a;
       font-weight: bold;
       font-size: 22px;
     }
69 
     /* 5. Clean Link Button */
     .btn-link {
       display: block;
       text-align: center;
       background-color: #2563eb;
       color: white;
       text-decoration: none;       /* No underline */
       padding: 12px;
       border-radius: 6px;
       font-weight: bold;
     }
81 
     .btn-link:hover {
       background-color: #1d4ed8;
     }
   </style>
 </head>
 <body>
   <div class="event-card">
     <span class="badge">Robotics Workshop</span>
     <h2>annual national robotics carnival</h2>
     <p>Join over five hundred young engineers for three exciting days of autonomous line-following bot competitions, drone flight simulations, and hands-on sensor programming workshops.</p>
     <div class="pricing">
       <span class="old-price">Rs. 999</span>
       <span class="new-price">Rs. 499 (Students)</span>
     </div>
     <a href="#" class="btn-link">Book Your Seat</a>
   </div>
 </body>
 </html>

1
Open the file in your browser to see how text-transform, letter-spacing, line-through, and text-decoration: none create a stunning, polished layout! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Absolute Units: Pixels (px), Points (pt) (CSS Units and Measurements).

👉 Continue to Next Lesson: Absolute Units: Pixels (px), Points (pt) →

Next Lesson

Absolute Units: Pixels (px), Points (pt)

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Font Size, Weight, Style, and Line Height	Absolute Units: Pixels (px), Points (pt)

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Absolute Units: Pixels (px), Points (pt)

Text Alignment, Decoration, Transform, and Spacing

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

Text Alignment, Decoration, Transform, and Spacing

In CSS, text layout is refined using properties that control:

Where lines align horizontally (text-align)
Underlines and strikethroughs (text-decoration)
Capitalization rules (text-transform)
Horizontal breathing room between letters and words (letter-spacing, word-spacing)

Let us explore these powerful properties through the lens of a school magazine editor!

The School Magazine Editor Analogy 🖋️

Imagine you are the chief student editor of your school's Annual Magazine:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE MAGAZINE EDITOR'S TOOLBOX                          |
+-------------------------------------------------------------------------+
| 1. text-align: center     --> Centering the Principal's message headline|
| 2. text-align: justify    --> Aligning both left & right edges of essays|
|                               neatly like a newspaper column            |
| 3. text-decoration: none  --> Removing ugly underlines from navigation  |
| 4. text-decoration:       --> Striking through old ticket prices        |
|    line-through               (Annual Day Pass: ~Rs. 100~ Free!)        |
| 5. text-transform:        --> Forcing badges to ALL-CAPS without typing |
|    uppercase                  every letter in caps manually in HTML     |
| 6. letter-spacing: 2px    --> Adding breathing room between capital     |
|                               letters for a luxury title feel           |
+-------------------------------------------------------------------------+

1. `text-align` (Horizontal Alignment)

Controls how text is positioned horizontally within its container.

1/* Left-aligned: Standard default for English/Hindi */
2p {
3  text-align: left;
4}
5 
6/* Centered: Best for headings, hero banners, and cards */
7h1 {
8  text-align: center;
9}
10 
11/* Right-aligned: Great for dates, table numbers, invoice totals */
12.date-meta {
13  text-align: right;
14}
15 
16/* Justified: Spaces words so both left and right edges align flush */
17.newspaper-article {
18  text-align: justify;
19}

2. `text-decoration` (Lines and Underlines)

By default, every web browser automatically draws an underline under <a> link tags. One of the very first things frontend developers do is remove or customize that underline!

1. Removing Link Underlines (`none` ⭐):

1a {
2  text-decoration: none; /* Clean links without underlines! */
3  color: #2563eb;
4}
5 
6/* Underline only when user hovers mouse over the link */
7a:hover {
8  text-decoration: underline;
9}

2. Common Decoration Values:

none: Removes all underlines or lines.
underline: Draws a line directly below the text.
line-through: Draws a line through the middle (perfect for e-commerce discounts: ~₹999~ ₹499).
overline: Draws a line above the text.

1/* E-commerce discount price */
2.original-price {
3  text-decoration: line-through;
4  color: #94a3b8;
5}
6 
7.discount-price {
8  color: #16a34a;
9  font-weight: bold;
10}

Modern Decorative Modifiers:

In modern CSS, you can even customize the color and wavy style of the line:

1/* Fancy red wavy underline */
2.highlight-error {
3  text-decoration: underline wavy #ef4444;
4}

3. `text-transform` (Smart Capitalization)

1/* Converts every letter to UPPERCASE */
2.badge {
3  text-transform: uppercase;
4}
5 
6/* Capitalizes the first letter of each word */
7.student-name {
8  text-transform: capitalize;
9}
10 
11/* Forces all letters to lowercase */
12.email-address {
13  text-transform: lowercase;
14}

4. `letter-spacing` and `word-spacing`

These properties adjust the micro-spacing between letters and words:

1. `letter-spacing` (Tracking)

Expands or contracts the space between individual letters. It is widely used by UI designers on uppercase headers and small badges to give them a premium, airy aesthetic:

1/* Modern elegant badge */
badge-pill {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px; /* 2px extra space between each letter */
font-weight: 700;
7}

2. `word-spacing`

Controls the spacing between entire words:

1h2 {
2  word-spacing: 4px;
3}

5. `text-indent` (First-Line Indentation)

In printed storybooks and textbooks, the very first line of a new paragraph is often pushed inward by a few centimeters. In CSS, you achieve this using text-indent:

1/* Indents the first line of every paragraph by 30px */
2.story p {
3  text-indent: 30px;
4}

Common Beginner Mistakes (Do's and Don'ts)

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
Typing all caps directly in HTML (`<h1>ADMISSIONS</h1>`).	Use `text-transform: uppercase;`.	Keeping HTML in natural sentence case helps screen readers pronounce words correctly instead of spelling them out as abbreviations!
Using `text-align: center` on inline tags like `<span>`.	Apply `text-align` to the parent block element (like `<p>` or `<div>`).	Inline elements have no outer width to center within.
Forgetting `text-decoration: none` on button links.	Add `text-decoration: none;` to navigation `<a>` tags.	Without it, link buttons will show an unsightly underline across the button text.

Quick Revision Summary

text-align sets horizontal alignment: left, center, right, or justify.
text-decoration: none removes the default browser underline from links.
text-decoration: line-through strikes through text (ideal for discounted prices).
text-transform: uppercase converts text to capital letters cleanly through CSS.
letter-spacing adds breathing room between individual characters for refined titles.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Which CSS property and value is used to remove the default underline from an HTML <a> link?

Question 2

What is the effect of applying text-transform: capitalize; to the phrase "science and technology"?

Question 3

Which value of text-align adjusts the spacing between words so that text aligns flush with both the left and right margins, like a printed newspaper?

Question 4

Which CSS property adds extra breathing room specifically between individual characters in a heading?

Question 5

What CSS declaration is best suited to display a discounted strike-through price like "~₹500~ ₹299"?

Practice Challenge (Try It Yourself)

1
Open your code editor and create magazine-badge.html.
2
Build a modern event ticket card featuring all the text formatting techniques:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Magazine Typography Challenge</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 40px 20px;
       display: flex;
       justify-content: center;
     }
14 
     .event-card {
       max-width: 440px;
       background-color: white;
       border-radius: 12px;
       padding: 28px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
     }
22 
     /* 1. Category Pill Badge */
     .badge {
       display: inline-block;
       background-color: #dbeafe;
       color: #1e40af;
       padding: 6px 12px;
       border-radius: 50px;
       font-size: 11px;
       font-weight: bold;
       text-transform: uppercase;   /* Automatic ALL-CAPS */
       letter-spacing: 1.5px;       /* Tracking space */
       margin-bottom: 12px;
     }
36 
     /* 2. Main Title */
     h2 {
       color: #0f172a;
       text-transform: capitalize;  /* Capitalize every word */
       margin-bottom: 12px;
     }
43 
     /* 3. Description */
     p {
       color: #475569;
       line-height: 1.6;
       text-align: justify;         /* Clean newspaper alignment */
       margin-bottom: 20px;
     }
51 
     /* 4. Pricing */
     .pricing {
       margin-bottom: 20px;
       font-size: 18px;
     }
57 
     .old-price {
       text-decoration: line-through; /* Strikethrough */
       color: #94a3b8;
       margin-right: 10px;
     }
63 
     .new-price {
       color: #16a34a;
       font-weight: bold;
       font-size: 22px;
     }
69 
     /* 5. Clean Link Button */
     .btn-link {
       display: block;
       text-align: center;
       background-color: #2563eb;
       color: white;
       text-decoration: none;       /* No underline */
       padding: 12px;
       border-radius: 6px;
       font-weight: bold;
     }
81 
     .btn-link:hover {
       background-color: #1d4ed8;
     }
   </style>
 </head>
 <body>
   <div class="event-card">
     <span class="badge">Robotics Workshop</span>
     <h2>annual national robotics carnival</h2>
     <p>Join over five hundred young engineers for three exciting days of autonomous line-following bot competitions, drone flight simulations, and hands-on sensor programming workshops.</p>
     <div class="pricing">
       <span class="old-price">Rs. 999</span>
       <span class="new-price">Rs. 499 (Students)</span>
     </div>
     <a href="#" class="btn-link">Book Your Seat</a>
   </div>
 </body>
 </html>

1
Open the file in your browser to see how text-transform, letter-spacing, line-through, and text-decoration: none create a stunning, polished layout! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Absolute Units: Pixels (px), Points (pt) (CSS Units and Measurements).

👉 Continue to Next Lesson: Absolute Units: Pixels (px), Points (pt) →

Next Lesson

Absolute Units: Pixels (px), Points (pt)

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Font Size, Weight, Style, and Line Height	Absolute Units: Pixels (px), Points (pt)

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

Text Alignment, Decoration, Transform, and Spacing

The School Magazine Editor Analogy 🖋️

1. text-align (Horizontal Alignment)

2. text-decoration (Lines and Underlines)

1. Removing Link Underlines (none ⭐):

2. Common Decoration Values:

Modern Decorative Modifiers:

3. text-transform (Smart Capitalization)

4. letter-spacing and word-spacing

1. letter-spacing (Tracking)

2. word-spacing

5. text-indent (First-Line Indentation)

Common Beginner Mistakes (Do's and Don'ts)

Quick Revision Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Absolute Units: Pixels (px), Points (pt)

Related Lessons

Practice Quiz

Loading Page Content...

Text Alignment, Decoration, Transform, and Spacing

The School Magazine Editor Analogy 🖋️

1. text-align (Horizontal Alignment)

2. text-decoration (Lines and Underlines)

1. Removing Link Underlines (none ⭐):

2. Common Decoration Values:

Modern Decorative Modifiers:

3. text-transform (Smart Capitalization)

4. letter-spacing and word-spacing

1. letter-spacing (Tracking)

2. word-spacing

5. text-indent (First-Line Indentation)

Common Beginner Mistakes (Do's and Don'ts)

Quick Revision Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Absolute Units: Pixels (px), Points (pt)

Related Lessons

Practice Quiz

1. `text-align` (Horizontal Alignment)

2. `text-decoration` (Lines and Underlines)

1. Removing Link Underlines (`none` ⭐):

3. `text-transform` (Smart Capitalization)

4. `letter-spacing` and `word-spacing`

1. `letter-spacing` (Tracking)

2. `word-spacing`

5. `text-indent` (First-Line Indentation)

1. `text-align` (Horizontal Alignment)

2. `text-decoration` (Lines and Underlines)

1. Removing Link Underlines (`none` ⭐):

3. `text-transform` (Smart Capitalization)

4. `letter-spacing` and `word-spacing`

1. `letter-spacing` (Tracking)

2. `word-spacing`

5. `text-indent` (First-Line Indentation)