What is the Correct HTML for Adding a Background Color to a Div?

The correct HTML for adding a background color to a div is to use the HTML style attribute along with the CSS background-color property.

<div style="background-color: green;"></div>

Let’s take a look at a simple example.

Let’s say I have the following HTML:

<div id="div1" style="background-color: green;">
  <p id="title">Some text in the div.</p>
</div>

As you can see in the code above, our main div will have a background color of green. And then inside of that div will be a paragraph with some text.

Example of the correct HTML for adding background color to a div

In this simple example, we will just have a standard HTML div and add some background color to it using the style attribute with the background-color property. We will then have some text in the div that will show up on top of the background image.

We will add some styles to one of the paragraphs so it can be seen over the green background.

<style>.p-title { padding-top: 20px; text-align: center; }.p-example {background: #fff; text-align: center; }</style>
<div id="div1" style="background-color: #7bbfa2; width: 300px; height: 200px;">
  <p class="p-title">This text should show over the background color.</p>
  <p class="p-example">This text has a white background.</p>
</div>

You can see in the example above, our color can be a color name or any valid CSS color. So for example, we will use a hexadecimal value for a lightish-green color as the background color for this example.

And finally, here is the above code in action for you to see how to add background color to a div.

Hopefully this article has been useful for you to understand what is the correct HTML for adding a background color to a div.