How to Change Text and Background Color in CSS

CSS (Cascading Style Sheets) is a language that allows you to create beautiful web pages.

Thanks to the CSS text color syntax, you can determine the exact color of text on your webpage. This syntax is essential because it increases the usability and accessibility of your website and other marketing collateral.

Its syntax is given as color:color/initial/inherit;.

On the other hand, the background-color property specifies the background color of an element. This property encompasses the whole size of the element, including padding and border. However, it doesn’t include margin.

Its syntax is: element { background-color property}.

CSS Text Color and Background Color Options

Changing text color on a web page is easy with the CSS color property.

Before we look at how it’s essential to understand the different ways you can set the property value. You can use:

• HTML color names: There are 140 color names supported in CSS. Yellow, fuchsia, maroon, and sky blue are just a few examples.
• Hex color codes: These codes are composed of three pairs of characters representing the intensity of the three primary colors. Possible values range from 00 (the lowest intensity of a primary color) to FF (the highest intensity of a primary color). The hex color code for black is #000000, red is #FF0000, and blue is #0000FF.

Image Source

• RGB values: RGB is another color model based on the combination of the primary colors red, green, and blue. Composed of three numbers separated by commas, each represents the intensity of the respective primary color as an integer between 0 and 255. Black is RGB (0, 0, 0), red is RGB (255, 0, 0), and blue is RGB (0, 0, 255).

Image Source

Download Now: Free Intro Guide to HTML & CSS

While you can use any of these values, color names are not recommended. They are challenging to remember beyond the standard rainbow, but they also introduce imprecision. For example, one person’s fuchsia may be another’s magenta which could be another’s hot pink, etc.

Use hex color codes or RGB values instead to ensure your website’s color scheme looks the way you want it to. They allow you to pick the exact shade of the color you want. We’ll use hex color codes in the examples below because they’re more beginner-friendly to learn.

Now let’s walk through how to change the color and background color of inline text in CSS.

You might be wondering what happens if you don’t set the color property in your CSS. That’s a good question. The default text color for a page is defined in the body selector. Here’s an example of a body selector setting the text color as blue:

Pro Tip: This code is interactive, try changing it to see the difference.

 

 
   body {
  color: blue;
}
 

If there is no body selector or color defined in the body selector, the default color is most likely black.

So let’s say I want to change the color of my paragraphs to navy, as mentioned in the example above, and all links on my website to aqua. Then I’d use the type selector p and attribute selector a[href] and set the color property to #000080 and #00FFFF, respectively.

Here’s the CSS:

Pro Tip: This code is interactive, try changing it to see the difference.

 

 
   p {
  color: #000080;
}
a[href] {
  color: #00FFFF;
}
 

Here’s the HTML:

Pro Tip: This code is interactive, try changing it to see the difference.

 

 
   <p>This is a  paragraph. The default text color was black, but I added a paragraph selector and defined the color property so it's navy.You'll see that the paragraph below is also navy, except for the link. Using a separate selector, the color of links has been changed to aqua.</p>
<p>Another paragraph that has <b><a href="default.asp" target="_blank">a link.</a></b></p>
 

Here’s the result:

See the Pen Changing Inline Text Color in CSS by HubSpot (@hubspot) on CodePen.

You can use this same process to change the color of headings, span tags, button copy, and any other text on a page. Now let’s look at how to change the background color of text.

Changing Text Background Color in CSS

To change the background color of the inline text, go to the <head> section. Simply add the appropriate CSS selector and define the color and background-color property with the values you want. Say you want to change the background color of links to yellow. Then you’d add the following code: 

Pro Tip: This code is interactive, try changing it to see the difference.

 

 
  a[href] {
   color: #000000;
   background-color: #FFFF00;
}
 

CSS Background Color

The CSS background-color property allows you to change the background color of an HTML element. You can set the background color for many elements, including a table, div, heading, and span element.

When defining the color property, you should also define the background color. It’s necessary to be compliant with W3C CSS and other frameworks, and it doesn’t hurt otherwise.

Checking Color Contrast

Changing the color and background color of text is also essential for avoiding problems of web accessibility on your website.

Take another look at the demo above.

While the colors used may be too similar for people who can’t see different shades of colors, the underline would help to indicate it is a link.

But what if I removed the underline from links on my site? Then I’d be relying on color alone to convey that it was a link. In that case, I’d need to identify and use web-accessible colors for my website.

This will take time and research. However, if you’re just getting started researching color blindness, then a tool like Contrast Checker can help you make accessible choices when changing the color of text on your site.

You can input a color and background color, and it will tell you “pass” if the pair has a contrast ratio of 4.5:1. Anything lower will fail. We’ll use this tool to identify the colors in the example below.

Say I want my text to be red and the background to be gray. I might start by plugging in #FF0000 and #808080 into Contrast Checker and see it only has a 1:1 contrast ratio. That’s not good.

To improve the ratio, I’ll move the slider of the foreground color to the left and the slider of the background color to the right until I hit the minimum of 4.5:1.

Since I want to make sure my design is as clear as possible, I’ll select the color #940000 and background color #E0E0E0, which has a 7:1 ratio.

I’ll use these to style the link so it really stands out from the rest of the paragraph.

Here’s the CSS:

Pro Tip: This code is interactive, try changing it to see the difference.

 

 
   a[href] {
  color: #940000;
  background-color: #E0E0E0;
  text-decoration: none;
}

Here’s the HTML:

Pro Tip: This code is interactive, try changing it to see the difference.

 

 
   <p>This is a  paragraph. The default text color is black. You'll see that the paragraph below is also black, except for the link. Using an attribute selector, I've set the color, background color, and text decoration property so that it appears with a reddish font color, gray background, and no underline.</p>
<p>Another paragraph that has <b><a href="default.asp" target="_blank">a link</a></b>.</p>

Here’s the result:

See the Pen Changing Text Background Color in CSS by HubSpot (@hubspot) on CodePen.

Adding Color to Your Website

Changing the color and background color of text on your website is easy. With some knowledge of CSS and HTML, it’ll be easier for you to build or create your website.

It will, however, take time to learn the color names and codes and how to combine them to make your website and other marketing collateral accessible — giving you just another reason to get started adding color to your site today.

Editor's note: This post was originally published in April 2021 and has been updated for comprehensiveness.