🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
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-transformproperty. - 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 thetext-transformproperty to automatically convert the text to uppercase. - Apply to Different Elements: Use
text-transform: uppercaseon 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
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-transformproperty 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.
Comments
Post a Comment
Leave Comment