The simplest way to change background color

The fastest way to change your HTML background color is to add a style attribute to your <body> tag. Open your HTML file, find the line that starts with <body>, and add style="background-color: colorname;" inside it. For example: <body style="background-color: lightblue;"> will make your entire page light blue.

HTML recognizes about 140 color names you can type directly — white, black, red, blue, green, yellow, orange, purple, pink, gray, and many others. If you want a specific shade that isn't a standard name, you can use a hex code (a six-character code starting with #) or an RGB value (three numbers from 0 to 255). For example, style="background-color: #FF5733;" or style="background-color: rgb(255, 87, 51);" both produce the same orange-red color.

Key Takeaways

  • Add style="background-color: colorname;" directly inside your <body> tag to change the entire page background.
  • You can use color names (blue, red, green), hex codes (#FF5733), or RGB values (rgb(255, 87, 51)) — all three methods work the same way.
  • If you want to change only part of a page, add the style to a <div> or other container instead of the body tag.
  • A separate CSS file or <style> block in your HTML head keeps your code organized if you have many color changes.

Using a separate style block for cleaner code

If you plan to change colors in multiple places or want to keep your HTML cleaner, add a <style> block inside your <head> section. This method separates your styling from your HTML tags and makes it easier to update later.

Open your HTML file and find the <head> section (the part before <body>). Add these lines inside it:

<style> body { background-color: lightblue; } </style>

Replace lightblue with any color name, hex code, or RGB value. This method does exactly the same thing as the inline style attribute, but it keeps your HTML tags cleaner and lets you manage all your colors in one place.

Changing background color for specific sections

You don't always want the entire page to be one color. To change the background of just one section, wrap that content in a <div> tag and add a style to it. For example:

<div style="background-color: yellow;"> <p>This paragraph has a yellow background.</p> </div>

Everything inside that <div> will have a yellow background, while the rest of your page keeps its original color. You can nest multiple divs with different colors, or use other container tags like <section>, <article>, or <header> the same way.

Understanding color formats: names, hex codes, and RGB

HTML accepts three ways to specify color, and they all work identically. Color names are the easiest to read — you straightforward type the color: background-color: red; or background-color: navy;. This works for about 140 standard colors, but you're limited to those exact shades.

Hex codes give you millions of color options. A hex code is a # followed by six characters (0–9 and A–F). The first two characters control red, the next two control green, and the last two control blue. For example, #FF0000 is pure red (maximum red, no green, no blue), and #00FF00 is pure green. You don't need to memorize these — use an online color picker tool to find the hex code for any color you want, then copy it into your HTML.

RGB values work the same way but use decimal numbers instead. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, and rgb(128, 128, 128) is gray. Each number ranges from 0 to 255. RGB is useful if you're working with a design tool that shows colors in RGB format, but hex codes are more common in web development.

Using a separate CSS file for larger projects

If you're building a website with many pages, create a separate CSS file to manage all your colors in one place. Create a new file called style.css and save it in the same folder as your HTML files. Inside style.css, write:

body { background-color: lightblue; }

Then, in the <head> section of each HTML file, add this line:

<link rel="stylesheet" href="style.css">

Now every HTML file that links to style.css will use the same background color. If you want to change the color later, you only have to edit it once in the CSS file, and all your pages update automatically. This method scales well as your project grows.

Troubleshooting: background color not showing

If you've added a background color but it's not appearing, check these common issues. First, make sure you spelled the color name correctly or that your hex code has exactly six characters after the #. Second, verify that your <body> tag is closed properly with </body> at the end of your HTML file — if the tag isn't closed, the style won't explore. Third, if you're using a <style> block, confirm it's inside the <head> section, not inside the <body>.

If you're linking to an external CSS file, double-check that the file path in your <link> tag is correct. If your CSS file is in a subfolder called css, the path should be href="css/style.css". You can also open your browser's developer tools (usually F12 or right-click and select "Inspect") to see if there are any error messages about the file not loading.

Frequently Asked Questions

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

Yes. Use background-image: url('imagefile.jpg'); instead of background-color. Make sure the image file is in the same folder as your HTML, or provide the correct path. You can combine this with background-color as a fallback if the image doesn't load.

What's the difference between background-color and background?

The background property is a shorthand that can set color, image, size, position, and repeat all at once. The background-color property sets only the color. For straightforward color changes, background-color is clearer and more direct.

How do I make the background transparent?

Use background-color: transparent; to let the background behind show through. This is useful when you're styling a specific section and want it to inherit the color from its parent container instead of having its own solid color.

Can I change the background color of just one paragraph?

Yes. Wrap the paragraph in a <div> with a style, or add the style directly to the <p> tag: <p style="background-color: yellow;">Your text here.</p>. This works for any HTML element.

What if I want a gradient background instead of a solid color?

Use background: linear-gradient(to right, color1, color2); to create a gradient that transitions from one color to another. For example, background: linear-gradient(to right, blue, green); creates a gradient from blue on the left to green on the right.