Not sure what's going on?.. (div element and background color)

HTML-CSS
1

Tell us what’s happening:

   **Your code so far**


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
 .red-text {
   color: red;
 }

 h2 {
   font-family: Lobster, monospace;
 }

 p {
   font-size: 16px;
   font-family: monospace;
 }

 .thick-green-border {
   border-color: green;
   border-width: 10px;
   border-style: solid;
   border-radius: 50%;
 }

 .smaller-image {
   width: 100px;
 }
 .silver-background {
   background-color: silver;
 }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
 <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

 <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

 <div>
<div class= "silver-background"> 
  <div {
background-color: silver;
}
</div>
   <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>

 <form action="https://freecatphotoapp.com/submit-cat-photo">
   <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
   <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
   <label><input type="checkbox" name="personality" checked> Loving</label>
   <label><input type="checkbox" name="personality"> Lazy</label>
   <label><input type="checkbox" name="personality"> Energetic</label><br>
   <input type="text" placeholder="cat photo URL" required>
   <button type="submit">Submit</button>
 </form>
</main>

   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36.

Challenge: Give a Background Color to a div Element

Link to the challenge:

2

Hello there,
You see this part:

<div>
    <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>

You need to create a class for the div tag. the name of the class should be silver-background
Then in the style section of the code, here:

<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

assign silver color to this class, follow this example down below:

.green-background {
  background-color: green;
}
1 Like
3

Thank you and I fixed the first part and I already did the second part for the style class, wrote the exact same way. It’s still not working and letting me get through. I put it towards the end of the style class/element. Does it matter which order I put the silver color in?

4 
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
.silver-background {
    background-color: silver;
  }
  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
  
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div>
 <div class= "silver-background"> 
   <div {
background-color: silver;
}
</div>
<div> 
  <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>
5

this part is wrong:

 <div {
background-color: silver;
}

you can only do inline styling within the div tag. This form of styling has to be in the style section right above. ( before HTML codes)

Maybe take a look at their differences in this article:

6

can you please tell me the solution, i’ve been at this for hours.

7

Thank You, I finally fixed it.

8

Yes for sure. I am terribly sorry.
You are not supposed to provide the solution so that FCC students solve it themselves.
Since you asked, look at this part, this is how you assign the style to the class:

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

but this should be in the style section before the h2 tag. look at the code down below:

<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
  .silver-background{
    background-color: silver;
  }
</style>

finally just add the silver-background to the div. like this:

<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>
9

btw check the “get a hint” part on each lesson for better guidance. you can find solutions and explanations over there.

10

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.