CSS

How to change the background color of text with CSS

December 9, 2021

How to change the background color of text with CSS

In this article, we’ll learn how to change the background color of text with CSS so that you can customize your text in your HTML projects.

change the background color of text with CSS cover

What’s up programmer, how are you? Let’s learn something new!

We can change various text properties such as color, font size and also background color with CSS

This property is called background-color, and the value it needs is a color.

Which could be the English color name like blue or a hex like #000000 (which represents the black color)

And then you will have your text with the color you want, let’s take a practical example:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How to change background color of a text</title>
 </head>
 <body>
  <p>Este parágrafo terá a cor de fundo alterada.</p>
 </body>
</html>

We have a very simple HTML, like a p tag.

Let’s change the background color of this element.

Check it out  the required CSS:

p {
 background-color: blueviolet;
}

See how it looks in the browser:

So we’ve reached our goal, now we can make other improvements to make the text prettier

How to change the font, set up a border spacing for the text, font color and etc, check it out:

p {
 background-color: blueviolet;
 color: gold;
 padding: 10px;
 font-family: Arial, Helvetica, sans-serif
}

See how it looks:

It is very important to know the CSS properties, as much to change the font as we want

As for changing the other elements, that will give you seniority as a programmer

Here on the blog we have several tips in relation to this, see the CSS category

Conclusion

In this article we learned  how to change the background color of a text with CSS

We do this by changing the background-color property on the target element.

This property also works for any element that has a background color.

We also analyzed other possibilities to change text fonts, such as color and font-family

Want to learn more about CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x