Good day. When I try to test run my work it is not responding, what should I do? What happens if I reset?

Tell us what’s happening:
Describe your issue in detail here.

  **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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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"
#cat-photo-element {
  background-color: green;
}
>
  <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 (Linux; Android 11; M2006C3LG) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.61 Mobile Safari/537.36

Challenge: Use an id Attribute to Style an Element

Link to the challenge:

Hi @Charli!

Try moving the:

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

into the <style></style> tags near the top of the code. That should work :slight_smile:

CSS can be added to your HTML in 3 ways:

  • Within <style></style> element in your HTML
  • Inline by adding the style="" attribute to your HTML element
  • By importing the CSS styles into your HTML file the the <link /> element

You can learn more by reading some of the MDN HTML documentation

Happy learning!

you have not write the correct syntax for inline style thats why your code not pass
remove this from the form and paste it into the style tag.

<style>
 #cat-photo-element {
  background-color: green;
}
</style>

and then assign it to the form like this

<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">

Thanks very much. I get you. However, what now confuses me is that, the instruction says: You should not give your form any class or style attributes.

For the sake of practice, I think they want you to customize the style of the form using an id attribute instead of a class or style attribute.

Here is an example of a form element with the id attribute:

<form id="idName">...</form>

You can modify the style of your form element by using a class to reference it instead:

<form class="className">...</form>

When you use an id or class on an HTML element, you reference the attribute in your CSS like this:

#idName { background-color: grey; }
.className { background-color: grey; }

Alternatively, you could also add your CSS rules on your HTML element with the style attribute:

<form style="background-color: grey;">...</form>

Hope that makes sense :slight_smile:

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