The simplest way to change background color in HTML

The easiest method is to add a style attribute directly to the opening <body> tag. Write style="background-color: colorname;" inside the tag. For example, <body style="background-color: blue;"> makes the entire page background blue. The color name can be a word like "red", "green", or "lightgray", or a hex code like "#FF5733".

This approach works when ready and requires no separate stylesheet. It is the fastest way to test a color change or style a single page. However, if you have multiple pages, you will repeat the same code on each one. For that reason, most people move to a stylesheet once they have more than one or two pages to manage.

Key Takeaways

  • Add style="background-color: colorname;" to the <body> tag to change the page background with a single line of code.
  • Use color names ("blue", "red"), hex codes ("#FF5733"), or RGB values ("rgb(255, 87, 51)") — all three formats work identically in HTML.
  • A CSS stylesheet in the <head> section lets you style multiple pages from one file and is the standard approach for larger sites.
  • The <style> tag in the <head> applies rules to the whole page without cluttering individual HTML tags.
  • Background color and text color are separate — a dark background requires light text to remain readable, and vice versa.

Using a style tag in the head section

For more control and cleaner code, place a <style> tag inside the <head> section of your HTML. Inside the style tag, write body { background-color: colorname; }. This rule applies to the entire page without adding attributes to individual tags.

This method keeps your styling separate from your HTML structure, making the code easier to read and update. If you decide to change the color later, you change it in one place instead of hunting through multiple tags. The style tag is also where you would add rules for text color, fonts, spacing, and other visual properties that affect the whole page.

Linking to an external CSS file

When you have multiple HTML pages, the professional approach is to create a separate CSS file (a plain text file with a .css extension). In that file, write the same rule: body { background-color: colorname; }. Then link to it from the <head> of each HTML page using <link rel="stylesheet" href="filename.css">.

Now all your pages share the same background color. If you change the color in the CSS file, every page updates automatically. This is how professional websites manage styling across dozens or hundreds of pages. You create the CSS file once, link it from every page, and maintain all your colors and fonts in a single location.

Color formats: names, hex codes, and RGB values

HTML accepts three ways to specify color. Color names are the simplest: "blue", "red", "white", "lightgray". These work for common colors but are limited to about 140 named colors that browsers recognize.

Hex codes start with a # and use six characters: "#FF5733" or "#0099CC". They let you specify any color precisely by mixing red, green, and blue values in hexadecimal notation. RGB values use three numbers from 0 to 255: "rgb(255, 87, 51)". All three formats work identically in the background-color property — choose whichever you are comfortable reading and remembering.

Making sure text is readable against your background

A dark background needs light text, and a light background needs dark text. If you change the background color, check that your text is still straightforward to read. You can set text color the same way: style="color: white;" on the <body> tag, or body { color: white; } in a style tag.

A common pairing is a dark background with white or light gray text. Another is a white or cream background with dark gray or black text. Test your page in a browser after changing colors — if you squint and the text disappears, the contrast is too low. Readers with vision difficulties will have even more trouble, so good contrast matters for usability.

Changing background color on specific sections

You do not have to color the entire page. You can color individual sections using <div> tags or other containers. Add the style attribute to the opening tag: <div style="background-color: lightblue;">. Everything inside that div will have a light blue background.

In a stylesheet, target the div by class or id: .section { background-color: lightblue; } or #header { background-color: navy; }. This approach lets you create visual separation between different parts of your page without coloring the whole thing. You might color a header one shade, the main content area another, and a footer a third color to guide the reader's eye through the page.

Frequently Asked Questions

What is the difference between background-color and background?

The background-color property sets only the color. The background property can set color, images, patterns, and other effects all at once. For a straightforward color change, use background-color. Use background when you want to add an image or gradient.

Can I use a gradient instead of a solid color?

Yes. Use the background property with linear-gradient: background: linear-gradient(to right, blue, red);. This creates a smooth fade from blue on the left to red on the right. Gradients are more complex than solid colors but create a polished look.

Why is my background color not showing?

Check that your HTML tag is spelled correctly — it must be <body>, not <Body> or <BODY>. Make sure the color name is spelled right or the hex code is valid. If you are using an external CSS file, confirm the link path is correct and the file exists in the right folder.

Does background color work on all browsers?

Yes. The background-color property has been part of HTML and CSS for decades and works on every modern browser — Chrome, Firefox, Safari, Edge, and others. You do not need to add special code for older browsers.