How to set text in uppercase with CSS

October 22, 2021

How to set text in uppercase with CSS

In this article we’ll see how to make the text in uppercase with CSS, in a very simple way and following the best practices of HTML and CSS.

text in uppercase with CSS cover

Hey you programmer, okay?

Let’s start talking  about it: if  you don’t know, it’s a bad practice to WRITE THE TEXT THAT WAY right into HTML

It is advisable to write everything in lowercase, except for the initial letter of each sentence and treat style differences with CSS

That’s why I created this article, to clear out this point of web development following the best practices, so now that you have a good reason to use the correct way, let’s practice

Uppercase text with CSS in practice

First let’s create a basic HTML for our mini project, see:

<!DOCTYPE html>
   <title>Caixa alta com CSS</title>
  <p>Este texto aqui é normal, <span>mas esta parte é em caixa alta</span>.</p>

Note that our goal is to capitalize the span tag content

And the rest of the text should be normal, as the text itself says

And to do that, let’s add the text-transform rule with the value uppercase, which will transform the text into uppercase.

The code is this:

span {
 text-transform: uppercase;

This is the final result:

That way we reached our goal, which was to make the text in capital letters with CSS and we also followed the best practices of web development

The text-transform property has other values as well:

  • lowercase: all text is lowercase;
  • capitalize: every word starts with a capital letter;


In this article, we learned that writing uppercase text directly in HTML is not considered a good practice.

For this result we must change the style of the text with CSS and to make this change we use the text-transform rule

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

If you want to learn more about CSS click here!

Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x