The simplest way: the style attribute

The fastest way to change a background color is to add style="background-color: colorname" directly to the HTML tag you want to color. If you want the entire page background to be blue, you write <body style="background-color: blue"> at the start of your page. If you want just one paragraph to have a yellow background, you write <p style="background-color: yellow">Your text here</p>.

You can use color names that browsers understand: blue, red, green, yellow, purple, orange, pink, gray, black, white, and dozens of others. You can also use hex codes (like #FF5733) or RGB values (like rgb(255, 87, 51)) if you want exact colors. The style attribute works on any HTML tag — paragraphs, divs, sections, headers, or the body tag itself.

The style attribute is useful for quick tests or single elements, but if you want to color many things the same way, you will repeat the same code over and over. That is where CSS comes in.

Key Takeaways

  • Add style="background-color: colorname" directly to any HTML tag to color just that element.
  • Use color names (blue, red, green), hex codes (#FF5733), or RGB values (rgb(255, 87, 51)) to pick your color.
  • Put your color rules in a <style> tag in the head section to color multiple elements without repeating code.
  • The background-color property works on any HTML tag — body, div, paragraph, section, or heading.
  • External CSS files let you manage colors for your whole website in one place instead of editing each page separately.

Using the style tag for multiple elements

When you have more than one or two elements to color, put your color rules in a <style> tag inside the <head> section of your HTML. Inside the style tag, you write rules that explore to all matching tags on the page. For example, if you write p { background-color: lightblue; }, every paragraph on that page will have a light blue background without you having to add style to each one.

You can target specific elements by giving them a class or id. If you add class="highlight" to a paragraph, then write .highlight { background-color: yellow; } in your style tag, only that paragraph gets the yellow background. This is much cleaner than repeating the style attribute on every element.

Hex codes and RGB for precise colors

Color names work for basic colors, but if you need a specific shade, use a hex code or RGB value. A hex code is a six-character code starting with # — for example, #FF5733 is a shade of orange. An RGB value uses three numbers from 0 to 255 — rgb(255, 87, 51) is the same orange. You can find hex codes and RGB values for almost any color using an online color picker.

Hex codes are shorter to type, so they are more common in real websites. You write background-color: #FF5733; the same way you would write background-color: orange;. The browser understands both.

External CSS files for whole websites

If you are building a website with many pages, put all your color rules in a separate CSS file and link it from each page. Create a file called styles.css, write your color rules inside it, then add <link rel="stylesheet" href="styles.css"> to the head section of each HTML page. Now every page uses the same colors, and you only have to change the color once in the CSS file to update your whole site.

This approach scales much better than style tags or inline styles. If you decide your background should be a different shade of blue, you change it in one place instead of hunting through dozens of HTML files.

Background colors on different elements

The background-color property works on almost any HTML tag. You can color the entire page by targeting the body tag. You can color sections, divs, paragraphs, headings, list items, table cells, or buttons. Each element gets its own background color independent of others.

Be careful with nested elements — if you color a div and also color a paragraph inside it, the paragraph color will cover the div color in that area. Browsers layer colors from the outside in, so the innermost element's color wins. This is useful when you want some parts of a colored section to be a different color, but it can be confusing if you do not expect it.

Common mistakes and how to fix them

The most common mistake is misspelling the property name. It is background-color, not background or backgroundcolor. If your color does not appear, check that you spelled it correctly and that you used a colon after the property name and a semicolon at the end.

Another mistake is using a color name that the browser does not recognize. Stick to common names like blue, red, green, yellow, purple, orange, pink, gray, black, and white. If you want an unusual color, use a hex code or RGB value instead. You can also accidentally close your style tag too early — make sure the closing </style> tag comes after all your color rules, not before.

Frequently Asked Questions

Can I use a picture as a background instead of a solid color?

Yes, use the background-image property instead of background-color. Write background-image: url('picture.jpg'); and point it to your image file. You can combine it with background-color as a fallback if 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, size, position, and repeat all at once. The background-color property sets only the color. For straightforward color changes, use background-color. Use background when you are setting multiple properties at the same time.

Do I have to use hex codes or can I just use color names?

Color names work fine for basic colors. Use hex codes or RGB only when you need a specific shade that does not have a name. Hex codes give you millions of color options, but color names are simpler to read and remember.

Will my background color work on all browsers?

Yes, background-color is one of the oldest and most supported CSS properties. Every browser understands it. Color names, hex codes, and RGB values all work everywhere.