DEV Community

Cover image for text-transform - property - CSS3
Jesús Mejías Leiva
Jesús Mejías Leiva

Posted on • Updated on • Originally published at blog.susomejias.dev

text-transform - property - CSS3

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

Alt Text

<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>
Enter fullscreen mode Exit fullscreen mode
.example-text-transform {
  text-transform: capitalize;
}
Enter fullscreen mode Exit fullscreen mode

uppercase

Alt Text

<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>
Enter fullscreen mode Exit fullscreen mode
.example-text-transform {
  text-transform: uppercase;
}
Enter fullscreen mode Exit fullscreen mode

lowercase

Alt Text

<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>
Enter fullscreen mode Exit fullscreen mode
.example-text-transform {
  text-transform: lowercase;
}
Enter fullscreen mode Exit fullscreen mode

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

thanks


Credits to the author of the icons for the banner.

Icons made by Vaadin from www.flaticon.com

Top comments (0)