📘 What is CSS Text Transformation?

The CSS text-transform property controls the capitalization of text without changing the original text written in HTML.

It is useful when you want headings, buttons, navigation links or labels to appear in a specific capitalization style.

🧩 CSS Text Transform Syntax

selector {
    text-transform: value;
}

🔑 Text Transform Values

⚪ Example 1: text-transform: none

The none value displays text normally without applying a transformation.

.text {
    text-transform: none;
}

🔠 Example 2: Uppercase

Use uppercase to display all letters in capital form.

.heading {
    text-transform: uppercase;
}

🔡 Example 3: Lowercase

Use lowercase to display all letters in lowercase.

.text {
    text-transform: lowercase;
}

🔤 Example 4: Capitalize

The capitalize value changes the first letter of each word to uppercase.

.title {
    text-transform: capitalize;
}

▶️ Live Comparison

The same HTML text can be displayed in different forms by changing only the CSS property.

💻 Practical Example: Navigation Menu

Text transformation is commonly used for navigation menus and buttons.

.menu a {
    text-transform: uppercase;
}

.menu a:hover {
    text-transform: uppercase;
}

🔘 Practical Example: Button Text

.button {
    text-transform: uppercase;
    font-weight: bold;
}

🎯 Text Transformation for Headings

You can use text transformation to maintain a consistent heading style throughout a website.

h2 {
    text-transform: capitalize;
}

💡 Important Note

CSS text-transform changes the visual presentation of text. It does not rewrite the actual text stored in your HTML.

💡 Practical Uses

⚠️ Common Mistakes

• Confusing capitalize with uppercase.
• Using uppercase text everywhere, which can reduce readability.
• Forgetting that text-transform changes display, not the original HTML text.
• Using inconsistent transformations across navigation elements.

📝 Practice Exercises

Try these exercises in your HTML Runner:

1. Create a heading and convert it to uppercase.
2. Convert uppercase text to lowercase.
3. Use capitalize on a paragraph.
4. Create a navigation menu using uppercase text.
5. Create an “Enroll Now” button using uppercase text.
6. Compare none, uppercase, lowercase and capitalize.

📚 Quick Reference

🎓 Key Points to Remember

• text-transform controls text capitalization.
• uppercase converts letters to uppercase.
• lowercase converts letters to lowercase.
• capitalize capitalizes the first letter of each word.
• none keeps the normal text presentation.
• CSS transformation changes visual presentation without changing the original HTML text.