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.
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> <html> <head> <title>Caixa alta com CSS</title> </head> <body> <p>Este texto aqui é normal, <span>mas esta parte é em caixa alta</span>.</p> </body> </html>
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;
Conclusion
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!
