DEV Community

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

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

3 1

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

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay