How To Make A Div Background Color

HTML Background Color Tutorial – How to Change a Div Background Color, Explained with Code Examples

One of the most common things you may have to do as a spider web programmer is to change the background-colour of an HTML element. But it may be confusing to do if you do not sympathize how to utilize the CSS background-color belongings.

In the article, nosotros discuss

the default background color value of an HTML chemical element
how to change the background color of a div, which is a very mutual element
which parts of the CSS box model are affected by the background-color holding, and
the dissimilar values this holding can take.

Default Groundwork Color of an Element

The default background color of a div is transparent. So if you do not specify the groundwork-color of a div, information technology will display that of its parent element.

Changing the Background Color of a Div

In this case, we volition modify the groundwork colors of the following divs.

                <div course="div-one"> I love HTML </div> <div class="div-2"> I honey CSS </div> <div grade="div-three"> I love JavaScript </div>

Without whatsoever styling, this volition translate to the following visually.

Let's modify the background color of the divs by adding styles to the classes. You can follow forth by trying the examples in an HTML file.

                <manner>     .div-1 {         background-color: #EBEBEB;     }          .div-2 {     	background-color: #ABBAEA;     }          .div-3 {     	background-color: #FBD603;     } </mode>  <trunk>     <div grade="div-ane"> I love HTML </div>     <div class="div-2"> I love CSS </div>     <div grade="div-3"> I love JavaScript </div> </torso>

This will consequence in the following:

Cool! We have successfully inverse the groundwork color of this div. Next, let'southward become to know more nearly this property. Let's see how the background-colour property affects parts of the CSS-box model.

Groundwork Color and the CSS Box Model

According to the CSS box model, all HTML elements can be modeled as rectangular boxes. Every box is equanimous of iv parts as shown in the diagram below.

Screen-Shot-2020-05-08-at-11.07.00-AM-1 — The CSS Box Model

Yous tin can read up on the box model if you are not familiar with information technology. The question is, which part of the box model is afflicted when you alter the background color of a div? The simple respond is the padding area and the content area. Let'south confirm this past using an example.

                                  <style>     body {         background-color: #ABBAEA;     }     div {         peak: 200px;         margin: 20px;         border: 5px solid;         background-colour: #FBD603;     } </style> <body>     <div>         <p>This is the parent div which contains the div nosotros are testing</p>          <div>             <p>This example shows that changing the groundwork colour of a div does non impact the border and margin of the div.</p>         </div>     </div> </body>

This will result in:

From the example to a higher place, nosotros can see that the margin area and the border surface area are non afflicted by the change in background color. Nosotros tin can change the color of the edge using the border-color holding. The margin expanse remains transparent and reflects the groundwork colour of the parent container.

Finally, permit's hash out the values the background-color belongings can take.

Background-color Values

Just like the color property, the background-color property can take six dissimilar values. Let's consider the three nearly common values with an case. In the example, nosotros fix the background-color of the div to ruby-red with different values.

                <fashion>     /* Keyword value/name of colour */     .div-one {         background-color: red;     }          /* Hexadecimal value */     .div-two {        background-colour: #FF0000;	      }          /* RGB value */     .div-3 {     	background-color: rgb(255,0,0);     }      </style>  <torso>     <div grade="div-1">         <p>The background property can take six different values.</p>     </div>      <div class="div-2">         <p>The background property can take six unlike values.</p>     </div>      <div class="div-three">         <p>The background property can accept half dozen different values.</p>     </div> </body>

Notice that they all result with the same background color.

Other values the background-color holding tin can take include HSL value, special keyword values and global values. Here are examples of each of them.

                /* HSL value */ groundwork-color: hsl(0, 100%, 25%;  /* Special keyword values */ background-color: currentcolor; background-colour: transparent;  /* Global values */ background-colour: inherit; background-colour: initial; background-colour: unset;

Y'all can read more on each of these values here.

When setting the background color of an element, information technology is important to ensure that the contrast ratio of the background colour and the colour of the text it contains is high enough. This is to ensure that people with low vision tin easily read the text.

Consider these ii divs.

The contrast between the background color of the beginning div and the color of the text is not loftier enough for anybody to see. So unless you are the only one using the website you are building and you take very good eyesight, you should avoid such color combinations.

The second div has a much meliorate dissimilarity ratio between the background color and the colour of the text . Thus, it is more accessible and clearer for people to read.

Determination

In this commodity, we saw how you lot tin change the background-color of a div. Nosotros besides discussed which parts of the CSS box model are affected by the alter in groundwork-color. Finally, we discussed the values the groundwork-color holding can take.

I hope yous found this article useful. Thanks for reading.

Learn to lawmaking for gratuitous. freeCodeCamp'south open source curriculum has helped more xl,000 people get jobs equally developers. Get started