The CSS background-color property applies color to a text element. You can specify a CSS built-in color keyword, a hexadecimal value, or another color value with the background-color property. The syntax for this property is: color: yourcolor;.
How to Apply a CSS Font Color
Setting the color and background color of text on a website is an essential part of web design.
That’s where the CSS color and background-color properties come in. The color property lets you set the color of HTML text. The background-color property lets you define text background colors.
This tutorial will discuss, with examples, how to set the color of text in CSS. We’ll then talk about how to set the background color of a text element.
CSS Font Color
A CSS font color is set using the color property. The color property sets the color of text, not the background of the element. You can use CSS color keywords or color values like hexadecimal strings to set a color.
The syntax for the color property is:
p {
color: red;
}This rule sets the color of all <p> tags in an HTML document to red.
We used a CSS color keyword. These keywords are convenient if you want to refer to a standard color, like “red” or “paleblue”. But, these keywords do not describe every color on the spectrum. If you want to use a specific color, you may want to use another type of color label.
The color property accepts any one of the following values:
| Value | Description | Examples |
| Color name | A color name | blue, hotpink |
| HEX color | A hexadecimal color. Identifiers are six characters long. | #f7f7f7, #0000ff |
| RGB color | RGB stands for red, green, and blue. | rgb(0, 50, 28), rgb(0, 0, 255) |
| HSL color | HSL stands for hue, saturation, and lightness. | hsl(0, 50%, 50%), hsl(180, 50%, 25%) |
By default, the text color used by a web page is text color that applies to the <body> tag on a web page. Unless otherwise specified, this will be black.
You could use the color property to define link colors in your style sheet.
Let’s walk through an example to illustrate how the color property works.
Change Font Color CSS: An Example
Suppose we are designing a website for a local grocery store, Peterson and Sons. The owners want the website to display a certain block of text in gray font. We can set this using the following code:
<html>
<p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese.
Today, Peterson and Sons operates five stores across the Seattle area.</p>
<style>
p {
color: gray;
}Our code returns: Click the 
button in the code editor above to see the output of our HTML/CSS code.
We use a <p> HTML tag to define a paragraph of text describing the Peterson and Sons grocery store. Then, in our CSS code, we create a style that sets the text color of all <p> tags to gray. To do so, we use a color name value (“gray”).
We could specify “rgb(128, 128, 128)” in place of “gray” if we wanted to refer to an RGB color value. Alternatively, we could have set the text color to gray using a hexadecimal value or an HSL value.
We are not using a CSS file for our styles. Our CSS styles are enclosed within a <style> tag in our HTML document.
CSS Text Background Color
The CSS background-color property sets the background color of an element. The background-color property accepts any of the color values discussed earlier (color name, HEX, RGB, HSL). This property can set the background color of text.
The syntax for the background-color property is:
p {
background-color: blue;
}This code sets a blue background color for all <p> tags on a page.
CSS Text Background Color Example
Suppose we want to add an orange background color to one of the sentences in the paragraph of text in the example above.
The sentence we want to highlight is “Today, Peterson and Sons operates five stores across the Seattle area.” And, as before, we want all the text in the paragraph to appear in gray. We can apply this text decoration using the following code:
<html>
<p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese.
<span>Today, Peterson and Sons operates five stores across the Seattle area.</span></p>
<style>
p {
color: gray;
}
span {
background-color: orange;
}Our code returns: Click the button in the code editor above to see the output of our HTML/CSS code.
In our HTML file, we defined a paragraph of text by enclosing that text within <p> tags. Then, we enclosed the last sentence in an HTML <span> tag. Doing so allowed us to apply a specific style only to that particular sentence in our code.
In our CSS code, we specified two rules. The first rule set the color of all text within the <p> tags to gray. The second rule set the background color of all text within the <span> tags to orange.
As you can see above, the final sentence in our code—the one enclosed in <span> tags—has an orange background color. This is the result of the second style rule we wrote.
Conclusion
The CSS color property lets you set the color of text on a web page. The background-color property lets you set a background color for text on a web page.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
This tutorial discussed, with examples, how to accomplish these tasks. Now you’re equipped with the skills you need to change font colors and text background colors like an expert web designer!
Are you interested in learning more about HTML? Check out our How to Learn HTML guide. You’ll find expert learning tips and guidance on top coding resources in this guide.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
