While writing any article or document, we often need some characters to be in specific cases. On a web page, the HTML element whose text requires to be transformed is applied with the CSS property “text-transform”. This property also saves time in such a way that after adding all of the characters, their case can be transformed at once.
This post will teach you how we can change text cases with CSS. So, let’s start!
How to Uppercase and Lowercase Text Using CSS?
In CSS, the “text-transform” property controls the capitalization of the text. It is also utilized to convert text into uppercase or lowercase.
text-transform Property Values
The possible values of the CSS text-transform property are listed below:
-
- “uppercase”: This value makes all characters in the element’s text capitalized.
- “lowercase”: This value changes the element’s text to lowercase.
- “capitalize”: This value alters each word’s first letter capitalized.
- “none”: This value restricts the element’s text for modification.
- “initial”: This value sets the default value.
- “inherit”: This value sets its value from its parent element.
Analyze the example below!
Example: Transforming Text into Uppercase and Lowercase
First, add a div element with the class name “box”. Inside the body, add three heading tags <h1>, <h2>, and <h3>, where the text of the <h1> heading is all in uppercase, <h2> is in lowercase, and the third is also in lowercase.
Below is the HTML code:
<h1>lowercase: WELCOME TO LINUXHINT</h1>
<h2>uppercase: welcome to linuxhint</h2>
<h3>capitalize: welcome to linuxhint</h3>
</div>
Style box div
height: 200px;
width: 80%;
border: 4px solid #e4cfcf;
background-color: cadetblue;
margin: 1px auto;
padding: 10px;
}
The div created in the above HTML file is now styled with CSS properties that are explained below:
-
- “height” is utilized for setting the height of the div.
- “width” is utilized for setting the width of the div.
- “border” property is utilized to apply the border around the element, which is of 4px width, solid line type, and #e4cfcf color.
- “background-color” specifies the element’s background color.
- “margin” property adjusts space on every side of the element.
- “padding” property is utilized to produce space around the content of the div element or inside the element’s border.
The below code blocks indicate that all of the heading elements are styled with different values of the text-transform properties. The <h1> element is applied with the property text-transform with the value set as “lowercase”:
text-transform: lowercase;
}
The <h2> element is applied with the text-transform property with the value set as “uppercase”:
text-transform: uppercase;
}
For <h3> element, the value of the text-transform property is set as “capitalize”:
text-transform: capitalize;
}
By providing the above-mentioned code, the text of the first heading is all transformed into lowercase letters and the second heading to uppercase. Whereas the first letter of each word is capitalized in the third heading:
Great! We have successfully learned how to transform the text into uppercase, lowercase, and all capitalized.
Conclusion
The text-transform property of CSS controls the capitalization of the text and is utilized to change the cases of the document’s text. This property applies to all elements, where the values of this property can be uppercase, lowercase, capitalize, or none. This blog has explained the procedure of converting text to uppercase and lowercase using the CSS text-transform property.
