text-transform property | CSS3

This property will allow us to capitalize, upper case and lower case any text using CSS.

Sun, Nov 1, 2020
text-transform property | CSS3 featured image

Today I return to share with you a CSS3 property that until recently was unknown to me. This property will allow us to capitalize, upper case and lower case any text using CSS in this way we will avoid using Javascript for it by introducing a small optimization in our application.

Examples

capitalize

capitalize
<p class="example-text-transform"> hello this is a sample text to be able to demonstrate the use of the CSS3 text-transform property </p> <p></p>
.example-text-transform { text-transform: capitalize; }

uppercase

uppercase
<p class="example-text-transform"> hello this is a sample text to be able to demonstrate the use of the CSS3 text-transform property </p> <p></p>
.example-text-transform { text-transform: uppercase; }

lowercase

lowercase
<p class="example-text-transform"> HELLO this is a sample text to be able to demonstrate the use of the CSS3 text-transform property </p> <p></p>
.example-text-transform { text-transform: lowercase; }

Property Values

ValueDescription
noneNo capitalization. The text renders as it is. This is default
capitalizeTransforms the first character of each word to uppercase
uppercaseTransforms all characters to uppercase
lowercaseTransforms all characters to lowercase
initialSets this property to its default value. Read about initial
inheritInherits this property from its parent element.

Original source here


Thanks for reading me. 😊