freeCodeCamp Challenge Guide: Give a Background Color to a div Element

Give a Background Color to a div Element


Problem Explanation

You can change the background color to a div Element (or section) by one of two ways.

The First Method:

Create a class in the style brackets.

<style>
 .blue-background {
    background-color: blue;
  }
</style>

You can then add the class to your div Element:

<div class="blue-background">
  <p> Example </p>
</div>

The Second Method:

Instead of creating a class like in the first method, you can create a div Element class in the style brackets.

Every div Element will have the class you created and assigned.

(This means it is a repeating class for every div Element that you create.)

<style>
  div {
    background-color: blue;
  }
</style>
15 Likes

How do i assign this attribute to the ā€˜divā€™ element?

2 Likes

Hello, you can change your div for ->

and inside you css

.silver-background{
background-color: silver;
}

3 Likes

Hi ItzCl0udy,

To assign the attribute to the div element first add a new div element in the CSS Style section at the top part of your code and add ā€œbackground-color: silver;ā€. In case youā€™re not sure where, add it under the last thing you put there which should be ".smaller-image/ width: 100px " attribute. It should look like this:

.smaller-image { width: 100px; } div { <----This will be the new "div" attribute background-color: silver; }

Then, after youā€™ve created this, go to the ā€œdivā€ attribute you already added from the previous lesson (this one is outside of/underneath the CSS Style section). Itā€™s the one you placed before the ā€œThings Cats Loveā€ paragraph. Inside the opening div tag (

) type class=ā€œsilver-backgroundā€. It should look like this:
  <div class="silver-background">
    <p>Things cats love:</p>

I hope this helps! Good luck!

31 Likes

Edit: nvm spelling mistake

Is this challenge broken for anyone else?

I created the new class:
.silver-backround {
background-color: silver;
}

and applied it to the div

in fact it even shows correct in the picture lol?

13 Likes

Hi! I used moebdick90ā€™s technique but it didnā€™t work. I tried replacing the ā€œdivā€ in the css with ā€œ.silver-backgroundā€ but it still didnā€™t work :frowning: help please

1 Like

READ THIS FIRST FOR SIMPLE ANSWER:
By first adding the following to your style, you are making silver available to div as an option to assign:
div {
background-color: silver;
I am still a bit fuzzy on the actual syntax, but when you want to assign it to the actual div you do the following:
(with angled brackets included)

div class=ā€œsilver-backgroundā€

Initially I had the same problem. The teaching text to the left hand side of the screen is somewhat misleading in that it demonstrates the use of adding a background by creating a new class and then asks you to create a class and assign.

However,
.green-background {
background-color: green;
}
leads you to believe that you need to add this to the style section (replacing green with silver) and then assign within the div. It sounds like that would work. But if you look at the other elements in style, like h2 and p, you see that the format for applying a class to the entire element follows a different pattern:

h2 {
font-family: Lobster, Monospace;
}

Thus, if you follow this pattern for div:
div {
background-color: silver;
}
and assign it within the div tag you should get the desired result.

Hope that works!

13 Likes

[quote=ā€œcamperbot, post:1, topic:18190, full:trueā€]
You can set an elementā€™s background color with the background-color attribute.

First in style!!!

31 Likes

This was so super helpful! I kept looking at the instructions like ā€œ??? something is missingā€. Thanks !

1 Like

Try type the code yourself.
Copying from the .green-background may cause some bugs which I donā€™t know why.

4 Likes

OMG thank you!! it worked!!

1 Like

i still can not make it work.
I did exactly what you did, and did not work

1 Like

im so stuck ive tried this over 50 times its still not working AAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRgh!!!

3 Likes

Okā€¦try to empty the cache on your browserā€¦and then try again, the same way as above

1 Like

Having similar issues as other users. Background is silver, element is added, yet cannot submit.

Anyone have any clues?

Edit: I see the ā€œclass=silver-backgroundā€ Im trying to work that out.

Edit: Found issue, looked to be a syntax error. Will post below.

I had a stow away ā€œ>ā€

8 Likes
<div class="silver-background> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> .silver-background{ background-color:silver; }
2 Likes

Ha - OK - AMERICAN SPELLING! COLOR!
Yeah, Iā€™m wonky British Oddball hereā€¦
HA!
Thanks.

4 Likes

this is the solution.

Very helpful, thank you.