Give a Background Color to a div Element - Please

HTML-CSS
1

Tell us what’s happening:

I have gone through a lot of solutions on the forum. But for the life of me I cannot figure out what’s wrong with my code.

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 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>
  
  <form action="/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 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/give-a-background-color-to-a-div-element

2

Remove the space after the property name and before the colon (:)

.silver-background {
    background-color : silver;
  }
vs
.silver-background {
    background-color: silver;
  }
1 Like
3

That worked ! Thanks a lot !
But I don’t understand. Is CSS white-space sensitive ?

4

Technically, it would work in the browser with the space but it’s not a good practice.

5

Good to know. Will keep that in mind.

6

Hi @1omore

There are cases when the white space do play the role.

But in this case, you have faced it looks like there are issue with task validation. As far as I can see, even if the background color is specified and displayed correctly, the task is not validating correctly. So it looks like a bug on FCC.

7

Yes. It was doing what it was supposed to. It’s just that the task was not being validated. Thanks !