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.
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!
