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

freeCodeCamp Challenge Guide: Give a Background Color to a Div Element
0

#1

You can set an element’s background color with the background-color attribute.

For example, if you wanted an element’s background color to be green, you’d use .green-background { background-color: green; } within your style element.


#2

How do i assign this attribute to the ‘div’ element?


#3

Hello, you can change your div for ->

and inside you css

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


#4

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!


#5

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?


#6

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


#7

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!


#8

[quote=“camperbot, post:1, topic:18190, full:true”]
You can set an element’s background color with the background-color attribute.

First in style!!!


#9

This was so super helpful! I kept looking at the instructions like “??? something is missing”. Thanks !


#11

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


#12

OMG thank you!! it worked!!


#13

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


#14

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


#15

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


#16

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.


#17

I had a stow away “>”


#18
<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; }

#20

Ha - OK - AMERICAN SPELLING! COLOR!
Yeah, I’m wonky British Oddball here…
HA!
Thanks.


#21

this is the solution.


#22

Very helpful, thank you.