How to Change Background Color on HTML

The Three Ways to Set a Background Color

You can change the background color of an HTML page or element using the style attribute, an internal style tag, or an external CSS file. The style attribute is fastest for a single element. The style tag works when you want to color multiple elements on one page. An external CSS file is best when you're managing colors across many pages.

All three methods use the same CSS property: background-color. The difference is where you write it and how many elements it affects at once.

Key Takeaways

The style attribute lets you color one element directly: <body style="background-color: blue;">
A style tag in the head section colors all matching elements on that page without repeating code.
Color names like "blue" and "red" work, but hex codes like "#FF5733" and RGB values like "rgb(255, 87, 51)" give you exact control.
The most common use is coloring the entire page by adding the style to the opening <body> tag.
Background color and text color are separate — a dark background needs light text so readers can see it.

Using the Style Attribute on the Body Tag

The quickest way to color your entire page is to add style="background-color: [color]" to your opening <body> tag. Replace [color] with a color name, hex code, or RGB value.

Here is the basic structure:

<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body style="background-color: lightblue;"> <h1>Welcome</h1> <p>This page has a light blue background.</p> </body> </html>

When you open this file in a browser, the entire page background will be light blue. The style attribute works on any HTML element — you can color a single paragraph, a div, or a table the same way by adding the attribute to that specific tag.

Using a Style Tag for Multiple Elements

If you want to color several elements without repeating the style attribute each time, use a style tag in the head section. Write the CSS rule once, and it applies to every matching element on the page.

Here is an example that colors the body background and all paragraphs:

<!DOCTYPE html> <html> <head> <title>My Page</title> <style> body { background-color: #f0f0f0; } p { background-color: white; } </style> </head> <body> <h1>Welcome</h1> <p>This paragraph has a white background.</p> <p>So does this one.</p> </body> </html>

Every <p> tag on the page now has a white background without you writing the style attribute on each one. This saves time and makes changes easier — if you want to change all paragraph backgrounds later, you edit the style tag once instead of hunting through your HTML.

Color Values: Names, Hex Codes, and RGB

HTML recognizes color names like "red", "blue", "green", "yellow", "orange", and "lightblue". These are straightforward and readable, but they give you only about 140 preset colors. For exact control, use hex codes (like #FF5733) or RGB values (like rgb(255, 87, 51)).

Hex codes start with a hash symbol and use six characters combining numbers and letters A through F. Each pair of characters controls red, green, and blue intensity from 00 (none) to FF (full). RGB values use three numbers from 0 to 255 for red, green, and blue. Both methods let you create millions of colors.

Here are three ways to write the same shade of orange:

background-color: orange; background-color: #FFA500; background-color: rgb(255, 165, 0);

Use color names for quick testing. Use hex or RGB when you need a specific shade — for example, when matching a brand color or following a design mockup.

Coloring Specific Sections with Divs and Classes

To color only part of your page, wrap that section in a <div> tag and add a style attribute or class. A div is a container that groups content together.

Here is an example using the style attribute on a div:

<body> <h1>My Website</h1> <div style="background-color: yellow;"> <h2>Featured Section</h2> <p>This section has a yellow background.</p> </div> <p>This paragraph is on the page background.</p> </body>

If you use a class instead, define it in a style tag and reuse it on multiple divs. This approach keeps your code cleaner when you have many colored sections:

<style> .highlight { background-color: yellow; } </style> <div class="highlight"> <h2>Featured Section</h2> </div>

Common Mistakes and How to Avoid Them

Forgetting the colon after background-color. Write background-color: blue; not background-color blue;. The colon separates the property name from the value.

Using the wrong color format. Hex codes must start with a hash: #FF5733 not FF5733. RGB values must include the word "rgb" and parentheses: rgb(255, 87, 51) not 255, 87, 51.

Choosing a background color that makes text hard to read. Dark text on a dark background or light text on a light background creates poor contrast. If your background is dark, use light text. If your background is light, use dark text. You control text color with the color property: style="background-color: navy; color: white;"

Forgetting the semicolon at the end of the style attribute. Write style="background-color: blue;" with a semicolon before the closing quote. If you have multiple properties, separate each with a semicolon: style="background-color: blue; color: white;"

Frequently Asked Questions

Can I use a background image instead of a solid color?

Yes. Use the background-image property instead of background-color. The syntax is background-image: url('image.jpg'); where 'image.jpg' is the path to your image file. You can combine both — set a background color as a fallback while the image loads.

What is the difference between background-color and color?

background-color colors the area behind the text. color colors the text itself. Use both together when you need contrast: style="background-color: navy; color: white;" creates white text on a dark blue background.

Do I need to save my file as .html for background colors to work?

Yes. Save your file with a .html extension (like index.html or mypage.html) so browsers recognize it as an HTML file and render the styles correctly. If you save it as .txt, the browser will display the code as plain text instead of running it.

Can I make the background color transparent?

Yes. Use background-color: transparent; to remove the background color and show whatever is behind the element. This is useful when you want an element to blend into its surroundings or when you are layering elements on top of each other.

How do I change the background color of just one word or sentence?

Wrap that text in a <span> tag and add a style attribute. A span is like a div but for inline content: <p>This word is <span style="background-color: yellow;">highlighted</span>.</p>

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.