How to make lowercase text using CSS

In this article we will learn how to force lowercase text using CSS, we need to use that when text comes in uppercase from the backend, for example.

Hey you programmer, okay? Let’s learn something new!

Watch this content on YouTube:

This case of forcing the text in lowercase is due to some factors

The layout request comes from the marketing/designer;
The database returns all uppercase;

So at these points we must use a technique to lowercase the text.

The most recommended way is in CSS, as it takes care of the styles on a web page.

Let’s imagine the following situation: we receive data from the back end on uppercase letters and we have the following final HTML

<!DOCTYPE html>
 <html>
  <head>
   <title>Forçanto texto em letras minúscula HTML/CSS</title>
  </head>
  <body>
   <h1>Nome do produto</h1>
   <p>ESTE PRODUTO É MUITO RESISTENTE, POSSUI APROXIMADAMENTE 12CM DE LARGURA E 20CM DE ALTURA.</p>
  </body>
</html>

And it produces this result in the browser:

Forcing lowercase text in CSS

Let’s now solve this problem in CSS, the code is simple, we just need the text-transform property with the value lowercase

p {
 text-transform: lowercase;
}

And now we have this result:

Well, problem solved, right?

But we created another one, in Portuguese the first letter of every sentence starts with a capital letter; and if we wanted to adjust this detail?

Just add this rule:

p:first-letter {
 text-transform: uppercase;
}

Now all the problems are solved:

The rule :first-letter, allows us to style only the first letter of a sentence

So we learned how to force lowercase text in HTML/CSS

Note that the text-transform rule is used to capitalize letters too!

We can also set the capitalize value for the text-transform property, then every word will have the first letter capitalized

Conclusion

We learned in this article how to force the text to lowercase, we just need to add the text-transform property with the value of lowercase to the target element

And if we need to capitalize the first letter, we can also easily do that with :first-letter

And that’s it for today; see you on the next post!

Do you want to learn more about HTML and CSS? Click here!