The simplest way to change background color in HTML

The fastest way to change a page's background color is to add a style attribute to the opening <body> tag. Write <body style="background-color: blue;"> and the entire page behind your text will turn blue. You can use any color name that HTML recognizes — red, green, yellow, purple, orange, and about 140 others — or you can use a hex code like #FF5733 for more precise control.

That single line does the job for a quick test or a straightforward page. If you are building something larger or want to reuse the same color across multiple pages, you will want to use a separate stylesheet instead, which we cover below.

Key Takeaways

  • Add style="background-color: colorname;" directly to the <body> tag to change the page background in one line.
  • Use color names like blue, red, or green, or use hex codes like #FF5733 for exact colors.
  • A separate CSS file keeps your colors organized and lets you reuse them across many pages without retyping.
  • You can also change the background of individual elements like paragraphs or boxes by adding the same style to their opening tags.

Using the style attribute on any HTML element

The style attribute works on any HTML tag, not just the body. If you want only a paragraph to have a colored background, write <p style="background-color: lightblue;">. If you want a box or section to stand out, wrap it in a <div> tag and add the style there: <div style="background-color: yellow;">.

This approach is useful when you want different parts of your page to have different backgrounds. A header might be navy blue, the main content area white, and a sidebar light gray — each one gets its own style attribute with its own color.

Creating a separate stylesheet for colors you use often

If you find yourself typing the same background color over and over, or if you are building a multi-page website, create a separate CSS file. Open a new file in your text editor, save it as style.css, and write rules like this:

body {   background-color: #f0f0f0; } .highlight {   background-color: yellow; }

Then link that file in the <head> section of your HTML page with <link rel="stylesheet" href="style.css">. Now any element with class="highlight" will automatically have a yellow background, and you can explore that class to as many elements as you want without retyping the color.

This method scales well. If you decide later that your highlight color should be orange instead of yellow, you change it once in the CSS file and every element using that class updates automatically.

Understanding color formats: names, hex codes, and RGB

HTML recognizes three ways to specify color. Color names are the easiest: blue, red, green, purple, orange, lightblue, darkred. There are about 140 of them, and they work in both inline styles and CSS files.

Hex codes give you millions of colors. A hex code is a # followed by six characters: #FF5733 is a shade of orange, #000000 is black, #FFFFFF is white. If you have a color in mind, you can find its hex code by searching "color picker" online, clicking the color you want, and copying the hex value.

RGB notation works too: rgb(255, 87, 51) means red at full brightness, green at 87, blue at 51. You will see this less often, but it works the same way as hex codes — you get precise control over the exact shade.

Changing background color on specific sections of the page

You do not have to color the entire page. Wrap any section in a <div> tag and give it a background color to create a colored box or band across the page. For example:

<div style="background-color: #e8f4f8;">   <h2>About Us</h2>   <p>We have been in business since 2010.</p> </div>

Everything inside that div — the heading, the paragraph, any images or links — will sit on the light blue background. You can nest divs inside each other to create more complex layouts with different colored sections.

Troubleshooting colors that do not show up

If you set a background color but it does not appear, check three things. First, make sure you spelled the color name correctly or used a valid hex code. Second, check that your text color is not the same as the background — white text on a white background will be invisible. Third, if you are using a CSS file, confirm that the <link> tag in your HTML head points to the correct file path.

If you are still stuck, open your browser's developer tools by pressing F12, click the Elements tab, and look at the element you styled. The developer tools will show you what styles are actually applied and whether there is a conflict with another rule.

Frequently Asked Questions

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

Yes. Instead of background-color, use background: linear-gradient(to right, blue, red); to fade from blue on the left to red on the right. You can specify the direction and as many colors as you want. This works in both inline styles and CSS files.

What if I want the background to be an image instead of a color?

Use background-image: url('image.jpg'); instead of background-color. The image file must be in the same folder as your HTML file, or you need to provide the full path. You can combine this with background-size: cover; to make the image fill the entire background.

Does background color work the same way in all browsers?

Yes. Background color is one of the oldest and most stable HTML features. Every browser — Chrome, Firefox, Safari, Edge — handles it identically. You do not need to add special code for different browsers.

Can I make the background transparent?

Yes, use background-color: transparent; to remove a background color you set earlier. This is useful when you want an element to inherit the background color from its parent element instead of having its own.