I got half of this challenge. I need help with the rest

Hey, guys for this challenge I got the green background and I thought i was all good. However, I am not passing. These are the errors I keep getting :
Your form element should have the id of cat-photo-form .

Your form element should have the background-color of green.
Here is my code:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">


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


   form { background-color: green;



<h2 class="red-text">CatPhotoApp</h2>


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


      <li>cat nip</li>

      <li>laser pointers</li>



    <p>Top 3 things cats hate:</p>


      <li>flea treatment</li>


      <li>other cats</li>



  <form action="/submit-cat-photo" background-color ="green" 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>



I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (</>) to add backticks around text.


See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.


thank you I had no idea

You are trying to add inline css but you should change your code:

<form action="/submit-cat-photo" background-color ="green" id="cat-photo-form">


<form action="/submit-cat-photo" style="background-color:green;" id="cat-photo-form">

But actually, challenge ask you to use id tag to customize your css in your style. So the right answer is :

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

Happy coding :slight_smile:


Challenge : Try giving your form, which now has the id attribute of cat-photo-form , a green background.

So, you need to assign background-color: green; to the id #cat-photo-form .

Use below css rule within <style>....</style> tags.

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

Before that you need to fix three things in the code you given.

  1. Remove form { background-color: green; }
  2. Remove background-color ="green" rule in your form element.
  3. Remove the space ( id="cat-photo-form "> )before the closing quotation in your id attribute value.

Hope this helps you. Best wishes.

1 Like