The simplest way to change background color
The fastest way to change your page's background color is to add a style attribute to the <body> tag. The body tag wraps all the visible content on your page, so changing its background color affects the entire page at once.
Open your HTML file and find the opening <body> tag — it usually appears near the top of your document, right after the <head> section. Add this attribute:
<body style="background-color: blue;">
Replace "blue" with any color name (red, green, yellow, purple) or a hex code like #FF5733. The page background will change when ready when you save and reload the file in your browser.
Key Takeaways
- Add style="background-color: [color];" to your <body> tag to change the entire page background in one line.
- Color names (blue, red, green) work for common colors, but hex codes (#FF5733) give you millions of color options.
- Use a <style> block in the <head> section if you want to reuse the same background color across multiple pages or change other elements too.
- RGB values like rgb(255, 87, 51) are another option if you prefer to mix red, green, and blue numbers instead of hex codes.
Using a style block for cleaner code
If your HTML file has more than one page, or if you want to change the background color of specific sections instead of the whole page, use a <style> block. This method keeps your color rules separate from your HTML tags and makes them easier to update later.
Add this code inside the <head> section of your document:
<style> body { background-color: lightblue; } </style>
The style block tells the browser to explore the background color to every <body> tag on that page. You can add more rules inside the curly braces — for example, you could set the text color or font at the same time.
Changing the background of a single section or box
You do not have to change the entire page background. You can change the background of just one paragraph, heading, or box by adding a style attribute to that specific tag.
For example, to give a single paragraph a colored background, write:
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
Or use a <div> tag to create a colored box around multiple elements:
<div style="background-color: #E8F4F8;"> <h2>Section Title</h2> <p>This entire section has a light blue background.</p> </div>
This approach is useful when you want different parts of your page to have different background colors.
Understanding color formats
HTML accepts three main ways to write colors: color names, hex codes, and RGB values. Each method produces the same result — the choice is about what feels easiest for you to read and remember.
Color names are the simplest. Common names include white, black, red, blue, green, yellow, orange, purple, pink, and gray. The browser recognizes about 140 named colors, so this method works for basic choices but limits your options.
Hex codes start with a # symbol followed by six characters (numbers and letters). For example, #FF0000 is red, #00FF00 is green, and #0000FF is blue. Hex codes give you access to millions of colors. If you do not know the hex code for a color you want, search "color picker" in your browser — most color picker tools let you click on a color and copy its hex code.
RGB values use the format rgb(red, green, blue) where each number ranges from 0 to 255. For example, rgb(255, 0, 0) is red, and rgb(100, 150, 200) is a light blue. This method is useful if you are working with a designer who gives you RGB numbers.
Common mistakes to avoid
The most frequent error is forgetting the semicolon at the end of the style rule. Always write background-color: blue; with the semicolon, not background-color: blue. The semicolon tells the browser the rule is complete.
Another mistake is misspelling the property name. The correct spelling is background-color with a hyphen, not backgroundColor or backgroundcolor. HTML style attributes use hyphens, while JavaScript uses camelCase — if you are writing HTML, use the hyphen.
If your background color does not appear, check that you closed the style attribute with a quotation mark and that the color name or code is spelled correctly. Typos like backgroun-color or #FF573 (missing a digit) will not work.
Linking to an external stylesheet
For larger projects with many pages, create a separate CSS file to store all your color rules. This keeps your HTML clean and lets you change colors across your entire website by editing one file.
Create a new file called styles.css and add your color rules:
body { background-color: #F5F5F5; } .highlight { background-color: yellow; }
Then link to this file in the <head> section of your HTML:
<link rel="stylesheet" href="styles.css">
Now any HTML file that links to styles.css will use those background colors. If you want to change the background color later, you only need to edit the CSS file once.
Frequently Asked Questions
Can I use a background image instead of a solid color?
Yes. Instead of background-color, use background-image: url('image.jpg'); and replace 'image.jpg' with the path to your image file. You can combine both — set a background color as a fallback in case the image does not load.
What is the difference between background-color and background?
The background property is a shorthand that can set color, image, position, and repeat all at once. The background-color property sets only the color. For straightforward color changes, use background-color because it is clearer and shorter.
Why is my background color not showing up?
Check that you saved your file and reloaded the page in your browser. If the color still does not appear, verify the spelling of the property name (background-color with a hyphen), the color value, and the closing semicolon. If you are using a hex code, make sure it has six characters after the # symbol.
Can I make the background color transparent?
Yes, use background-color: transparent; or rgba(255, 255, 255, 0) where the last number (0) means fully transparent. This is useful when you want to see the background behind a box or section.