How to Change Text and Background Color in CSS (2023)

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

How to Change Text and Background Color in CSS (1)

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.

Whether you’re building from scratch or are using BootStrap CSS, you’ll find the knowledge of HTML and CSS useful. In this article, we’ll examine how to change text and background color in CSS.

CSS Color Property

CSS color property is used to select the color of text, the color of the webpage’s background, and the color of the borders.

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.

How to Change Text and Background Color in CSS (3)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).

How to Change Text and Background Color in CSS (4)Image Source

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.

(Video) How to Change Text Color in HTML and CSS 2021

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

Changing Inline Text Color in CSS

To change the color of the inline text, go to the section of your web page. Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you’d add p {color: #000080; } to the head section of your HTML file.

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] {

(Video) How to Change Selected Text Background Color in CSS

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.

Recommended Resource

Free CSS Code Snippet Templates

Fill out this form to get dozens of CSS coding templates.

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;

(Video) How to Change Background Color with CSS 2019

}

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.

How to Change Text and Background Color in CSS (5)

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.

How to Change Text and Background Color in CSS (6)

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.

How to Change Text and Background Color in CSS (7)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.

How to Change Text and Background Color in CSS (8)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.

(Video) Text with different background color || HTML and CSS

 

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.

FAQs

How do I change the background color of text in CSS? ›

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.

How do I make my background a full color in CSS? ›

We can set a full-page background color by simply changing the screen height of an HTML body. In Tailwind CSS, we use an alternative of CSS background-color property which is represented as background-color-opacity ( eg: bg-blue-200 ) and it is used to specify the background color of an element.

What are the 4 ways to set color in CSS? ›

There are several different ways to specify colors in CSS.
  1. Color Keywords.
  2. RGB.
  3. RGBA.
  4. HSL.
  5. HSLA.
  6. Hexadecimal.

Which style will change the color of the text CSS? ›

Using RGBA color values to change text color in CSS

RGBA color value manipulation is also a good way to change text color in CSS. The RGBA abbreviation stands for Red, Blue, Green, and Alpha. The Alpha value controls the transparency of the color.

How do you change background color and text color in HTML? ›

To set the background color in HTML, use the style attribute, with the CSS property background-color inside the body tag of the HTML document. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color. The bgcolor attribute deprecated in HTML5.

How do you color in CSS? ›

The most common way to specify colors in CSS is to use their hexadecimal (or hex) values. Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers. Hex numbers can be 0-9 and A-F.

Can you give a div a background color? ›

To set a background color for a div or related element in CSS, you use the background-color property.

How do I fill the background with color? ›

In the Layers panel, click on Background Layer. From Background Layer, navigate to the Select drop-down menu and click All. You can also press Ctrl + A. to make the selection. Click Edit and then click Fill.

How do I change my entire background color? ›

Select Start > Settings > Personalization > Colors, and then choose your own color, or let Windows pull an accent color from your background.

What are the 3 styles of CSS? ›

There are three types of CSS which are given below: Inline CSS. Internal or Embedded CSS. External CSS.

What is a CSS color code? ›

RGB Color Codes in CSS

Each number represents the intensity of the respective primary color as an integer between 0 and 255. These numbers are then wrapped in parentheses and preceded by a lowercase “rgb.” So rgb (0, 0, 0) is black, rgb (255, 0, 0) is red, and rgb (0, 0, 255) is blue.

What are the 3 method of CSS? ›

CSS can be applied to HTML or XHTML using three methods: linked, embedded, and inline.

How do you change font in CSS? ›

How to Change the Font With CSS
  1. Locate the text where you want to change the font. ...
  2. Surround the text with the SPAN element: This text is in Arial.
  3. Add the attribute style="" to the span tag: This text is in Arial.
  4. Within the style attribute, change the font using the font-family style. ...
  5. Save the changes to see the effects.
5 Nov 2020

What color is 00ff00 in CSS? ›

#00ff00 color name is Green1 color. #00ff00 hex color red value is 0, green value is 255 and the blue value of its RGB is 0. Cylindrical-coordinate representations (also known as HSL) of color #00ff00 hue: 0.33 , saturation: 1.00 and the lightness value of 00ff00 is 0.50.

Which CSS property is used to change the background color? ›

The background-color CSS property sets the background color of an element.

How do I set two background colors in CSS? ›

CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

How do I change the color of text? ›

Select the text that you want to change. On the Home tab, in the Font group, choose the arrow next to Font Color, and then select a color.

How do I find my CSS color code? ›

CSS Color Names

Try clicking on a value. This will open the color in Quackit's online editor so you can see how it looks (and grab the code). There's also a link to a color tester where you can get another preview of the color.

How do you color a div in CSS? ›

How to Change a Div Background Color
  1. Add a CSS class to the div you'd like to change. First, find the div in your HTML code and add a class to the opening tag. ...
  2. Add the new class selector to your CSS code. Next, head over to your CSS code and add your new class selector. ...
  3. Choose a new background color.
7 Jun 2022

What is theme color in CSS? ›

The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS <color> .

Can you color image in CSS? ›

You can set background-color CSS property. You can create non-transparent part that will be fixed, and transparent part of image which will be filled by any color you like via CSS.

Can you tint an image in CSS? ›

The background property in CSS can accept comma separated values. “Multiple” backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can “tint” that image.

What is the key command to fill a background color? ›

To Fill with the Foreground color press Alt Backspace (Mac: Option Delete). To Fill with the Background color press Ctrl Backspace (Mac: Command Delete).

How do I set fill color? ›

Apply a pattern or fill effects

Select the cell or range of cells you want to format. Click Home > Format Cells dialog launcher, or press Ctrl+Shift+F. On the Fill tab, under Background Color, pick the color you want.

Which tool is used to fill Colour in background? ›

The Paint Bucket tool is used to fill a selected area with a color or pattern by clicking on a pixel in that area.

Why is my background color not showing up CSS? ›

that is because you have set the background color, and then overwritten it by using the background shorthand…. either move the background-color call after the background shorthand, or add it TO the shorthand… the browser interprets your current code like this…

How do you put a background image in CSS? ›

CSS Background Image
  1. Set the background image for a page: body { background-image: url("paper.gif"); } ...
  2. This example shows a bad combination of text and background image. The text is hardly readable: body { background-image: url("bgdesert.jpg"); ...
  3. p { background-image: url("paper.gif"); } Try it Yourself »

Which type of CSS is faster? ›

The main difference between inline CSS and external CSS is that inline CSS is processed faster as it only requires the browser to download 1 file while using external CSS will require downloading HTML and CSS files separately.

How do I use CSS in HTML? ›

CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.

What color is #000000? ›

#000000 color name is Black color. #000000 hex color red value is 0, green value is 0 and the blue value of its RGB is 0.

What are the 4 color codes? ›

The four band color code is the most common variation. These resistors have two bands for the resistance value, one multiplier and one tolerance band. In the example shown here, the 4 bands are green, blue, red and gold. By using the color code chart, one finds that green stands for 5 and blue for 6.

What is CSS border color? ›

Definition and Usage

The border-color property sets the color of an element's four borders. This property can have from one to four values. If the border-color property has four values: border-color: red green blue pink; top border is red.

What is the full form of CSS? ›

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.

What CSS means? ›

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

What is CSS very short answer? ›

Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.

How do I edit text in HTML CSS? ›

To do so, we change the visibility of this text using CSS to hidden first. Then we add a new text at the exact same position, using the pseudo elements and corresponding explicit positioning. Note that after is the pseudo element in use here. We use the visibility modifier once again to show the new text.

How do I edit style in CSS? ›

3. Modify Style Sheets CSS
  1. Using FTP, navigate to your child themes style. ...
  2. Open the file on your desktop using a code editor like Notepad++
  3. Scroll down the Line number where the CSS is that you want to modify.
  4. Modify the CSS, save the changes to the file and upload the file to your themes root directory using FTP.

Can you change text via CSS? ›

CSS can insert text content before or after an element, or change the content of a list item marker (such as a bullet symbol or number) before a <li> or other element with display: list-item; .

What Colour code is gold? ›

The hex code for gold is #FFD700.

Why is 255 white? ›

Black is the zero value at RGB(0,0,0), and White is maximum at RGB(255,255,255). 255 is the brightest shade of a RGB color that the viewing device can use (because 255 is the largest number that can be stored in an 8-bit byte).

What color is 0xffffff? ›

Thus white is generally written as 0xffffff (depending on your system capitalization may or may not matter).

What is the correct CSS syntax? ›

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

How do I change the background of my text? ›

Go to Design > Page Color. Choose the color you want under Theme Colors or Standard Colors. If you don't see the color you want, select More Colors, and then choose a color from the Colors box.

How do you change your background on text? ›

Run the Message app from your app tray, tap the More button at the upper right corner and go to the Settings screen. Step 2. Touch the Backgrounds option and select your favorite background from the bottom of the screen. Step 3.

How do I remove background color from text in CSS? ›

You can use background-color: rgba(0,0,0,0); The a is for alpha , it sets the opacity. But the background-color: transparent; is the way to go.

How do you change the color of a border in CSS? ›

CSS Border Color
  1. name - specify a color name, like "red"
  2. HEX - specify a HEX value, like "#ff0000"
  3. RGB - specify a RGB value, like "rgb(255,0,0)"
  4. HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
  5. transparent.

How do you change the color of text in HTML? ›

Attribute Values:
  1. color_name: It sets the text color by using color name. For example: “red”.
  2. hex_number: It sets the text color by using color hex code. For example: “#0000ff”.
  3. rgb_number: It sets the text color by using rgb code. For example: “rgb(0, 153, 0)”.
14 Sept 2022

How can I change the background color? ›

Select Start > Settings > Personalization > Colors, and then choose your own color, or let Windows pull an accent color from your background.

How can I change my text without changing the background? ›

Click 'Shift+Backspace,' and it will open the Fill window. Now choose the option of 'content-aware and click Ok. Doing this will remove the text, and all you've to do is click 'Ctrl+D. ' You're good to go.

How do you put a background color on HTML? ›

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

How we can change the text appearance? ›

You can use bold font to improve visibility. On your device, open the Settings app.
...
This feature changes the text color to either black or white, depending on the original text color.
  1. On your device, open the Settings app.
  2. Tap Accessibility. Display size and text.
  3. Turn High contrast text on or off.

How do I make the background of text black? ›

Some of these steps work only on Android 11.0 and up. Learn how to check your Android version. You can change your display to a dark background using a dark theme or color inversion.
...
Turn on dark theme
  1. Open your device's Settings app .
  2. Select Accessibility.
  3. Under "Color and motion," turn on Dark theme.

What is the CSS code for transparent background? ›

There is no hex code for transparency. For CSS, you can use either transparent or rgba(0, 0, 0, 0) .

What is rgb in CSS? ›

RGB Value. In CSS, a color can be specified as an RGB value, using this formula: rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

Videos

1. CSS For Beginners(text background color) Html & DHTML on technodroid Piyush
(ARsenal studio)
2. XHTML and CSS Tutorial - 19 - text-align and Changing Background Color
(thenewboston)
3. The Basics: # 11 Change Background Color in CSS
(Lennyroy Robles)
4. How To Change CSS Font Color
(Full Stack Coding Tutorials)
5. mouse hover change background and text color of the div css selector
(Haritha Computers & Technology)
6. Gradient text with CSS | CSS Tip of the Day #shorts
(Kevin Powell)
Top Articles
Latest Posts
Article information

Author: Eusebia Nader

Last Updated: 10/05/2022

Views: 6325

Rating: 5 / 5 (60 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Eusebia Nader

Birthday: 1994-11-11

Address: Apt. 721 977 Ebert Meadows, Jereville, GA 73618-6603

Phone: +2316203969400

Job: International Farming Consultant

Hobby: Reading, Photography, Shooting, Singing, Magic, Kayaking, Mushroom hunting

Introduction: My name is Eusebia Nader, I am a encouraging, brainy, lively, nice, famous, healthy, clever person who loves writing and wants to share my knowledge and understanding with you.