How to Add Uppercase Text with CSS

Introduction

Transforming text to uppercase in CSS can be helpful for creating emphasis or styling headings. The text-transform property allows you to automatically convert text to uppercase, regardless of how it was entered in the HTML.

In this tutorial, you'll learn how to convert text to uppercase using the text-transform property in CSS.

Problem Statement

Create a CSS code that:

Converts text to uppercase using the text-transform property.
Demonstrates how to apply this style to various text elements like paragraphs, headings, or spans.

Example:

Input: A paragraph element with the text "Uppercase Text Example".
Output: The text appears in all uppercase letters.

Solution Steps

Use text-transform: uppercase: Apply the text-transform property to automatically convert the text to uppercase.
Apply to Different Elements: Use text-transform: uppercase on different HTML elements, such as paragraphs or headings.

HTML Structure

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

    <p class="uppercase-text">This text is transformed to uppercase using text-transform: uppercase.</p>
    <h1 class="uppercase-text">This heading is also uppercase.</h1>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Use `text-transform: uppercase`

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

Step 2: Apply to Different Elements

You can apply the text-transform property to different elements such as paragraphs (<p>) or headings (<h1>).

Conclusion

Converting text to uppercase in CSS is easy using the text-transform: uppercase property. It automatically transforms text into uppercase, regardless of how it was written in HTML, making it a useful tool for creating emphasis and styling headers or important content.

Java Guides

Search This Blog