How to Add Capitalization Styles with CSS

Introduction

Capitalization styles in CSS allow you to control the appearance of text by transforming it into uppercase, lowercase, or capitalizing the first letter of each word. This can be achieved using the text-transform property.

In this tutorial, you'll learn how to apply different capitalization styles using the text-transform property in CSS. These styles can help improve the readability and design of your content.

Problem Statement

Create a CSS code that:

Applies different capitalization styles (uppercase, lowercase, capitalize) to text.
Demonstrates how to use the text-transform property.

Example:

Input: A paragraph element with the text "Capitalization Example".
Output: The text appears transformed into uppercase, lowercase, or capitalized based on the applied CSS.

Solution Steps

Use text-transform: uppercase: Apply this property to transform text into all uppercase letters.
Use text-transform: lowercase: Use this to convert all text to lowercase letters.
Use text-transform: capitalize: Apply this to capitalize the first letter of each word.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Capitalization Styles Example</title>
    <style>
        /* Step 1: Transform text to uppercase */
        .uppercase-text {
            text-transform: uppercase;
        }

        /* Step 2: Transform text to lowercase */
        .lowercase-text {
            text-transform: lowercase;
        }

        /* Step 3: Capitalize the first letter of each word */
        .capitalize-text {
            text-transform: capitalize;
        }
    </style>
</head>
<body>

    <p class="uppercase-text">This text is transformed to uppercase.</p>
    <p class="lowercase-text">THIS TEXT IS TRANSFORMED TO LOWERCASE.</p>
    <p class="capitalize-text">this text is capitalized.</p>

</body>
</html>

Explanation

Step 1: Use `text-transform: uppercase`

To convert all text to uppercase, use the following CSS:
```
.uppercase-text {
    text-transform: uppercase;
}
```

Step 2: Use `text-transform: lowercase`

To convert all text to lowercase, use this code:

.lowercase-text {
    text-transform: lowercase;
}

Step 3: Use `text-transform: capitalize`

To capitalize the first letter of each word, apply this CSS:
```
.capitalize-text {
    text-transform: capitalize;
}
```

Output

How to Add Capitalization Styles with CSS

Conclusion

You can easily add capitalization styles to text using the text-transform property in CSS. By applying uppercase, lowercase, or capitalized styles, you can control how text appears to enhance readability or follow design guidelines.

Java Guides

Search This Blog