How to Transform Text to Uppercase in CSS?
Last Updated :
17 Apr, 2024
In CSS, you can change the case of text to uppercase using the text-transform property. This property allows you to transform the text to uppercase, lowercase, capitalize the first letter of each word, or revert to the default case. In this article, we will focus on how to uppercase text in CSS using the text-transform property.
Convert Text to Uppercase using text-transform Property
The text-transform property is used to specify how to capitalize or format text. To convert text to uppercase, set the value of text-transform to uppercase.
Example 1: In this example, we will convert text to Uppercase using the text-transform property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Uppercase Text</title>
<style>
.uppercase-text {
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="uppercase-text">
This text will be displayed in uppercase.
</p>
</body>
</html>
Output:
THIS TEXT WILL BE DISPLAYED IN UPPERCASE.
Example 2: In this example, we will convert text to Capitalize using text-transform property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Uppercase Text</title>
<style>
.uppercase-text {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase-text">
This text will be displayed in uppercase.
</p>
</body>
</html>
Output:
This Text Will Be Displayed In Uppercase.
Share your thoughts in the comments
Please Login to comment...