
text-transform property | CSS3
Sun, Nov 1, 2020
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

<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

<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

<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
Value | Description |
---|---|
none | No capitalization. The text renders as it is. This is default |
capitalize | Transforms the first character of each word to uppercase |
uppercase | Transforms all characters to uppercase |
lowercase | Transforms all characters to lowercase |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. |
Original source here
Thanks for reading me. 😊