Weird bug with CSS background colors

HTML-CSS
1

Tell us what’s happening:
Hi all,

I’m working on the “Basic CSS: Use an id Attribute to Style an Element” challenge, which asks me to give an id to a form element on my page and then use CSS to give that id a green background color. I’ve checked my code in numerous ways, and I can’t find any mistakes with it, but for some reason, the background color isn’t changing to green.

I think this is a specific issue with this one challenge, because I’ve put the exact same code into earlier challenges, working with the same page, and it works there, just not on this one. It seems like it might be a general problem with background colors, because there’s a div which is coded to have a silver background color which also doesn’t work on this challenge only, even though the same code works fine on other challenges.

The freeCodeCamp interface itself gives me check marks for all the conditions for passing the challenge which refer to my code itself (" Your form element should have the id of cat-photo-form ; Your form element should have an id attribute ; You should not give your form any class or style attributes"), but it fails me because " Your form element should have the background-color of green". Am I nuts? Is there something wrong with the page, or with my code? If it’s my code, why does the same code work fine to change the background color on other challenge pages?

Many thanks for your help!

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

#cat-photo-form {
  background-color: green;
}

</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="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
  <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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36.

Challenge: Use an id Attribute to Style an Element

Link to the challenge:

2

You are missing a curly brace. Once you fix that it should pass

3 Likes
3

Thank you so much, that did it!