Jesús Mejías Leiva

Posted on Nov 1, 2020 • Edited on Jun 27, 2022 • Originally published at blog.susomejias.dev

text-transform - property - CSS3

#css #performance

Introduction

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>

.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>

.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>

.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.