Https://learn.freecodecamp.org/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element

HTML-CSS
1

https://learn.freecodecamp.org/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element

I tried to solve this problem but I can’t
I made everything mentioned in the description but it didn’t work, I watch the video too
anyone can help me solve this

2

Hi,

Could you share the code that you wrote for this exercise?

3

yes, sure
here’s the code:-

<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="/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>

4

Thanks! Your solution looks good to me. What kind of error message are you receiving?

5

Your form element should have the background-color of green.

this is the error message!

6

Okay. Could you reset the exercise and try your solution once again?

7

I tried this many times and it didn’t work
I’ll search about this problem again

thank you so much for your response.

8

Make sure you are using chrome. Other browsers may not work.

9

I am using chrome canary! its for developers

ok thank you

10

Canary is the daily build trying out there new stuff, not a stable release and could cause issues? I’m on a Mac, I stay away from Chrome as much as possible.

1 Like
11

{“index.html”:"<link href=“https://fonts.googleapis.com/css?family=Lobster” rel=“stylesheet” type=“text/css”>\n\n .red-text {\n color: red;\n }\n\n h2 {\n font-family: Lobster, monospace;\n }\n\n p {\n font-size: 16px;\n font-family: monospace;\n }\n\n .thick-green-border {\n border-color: green;\n border-width: 10px;\n border-style: solid;\n border-radius: 50%;\n }\n\n .smaller-image {\n width: 100px;\n }\n\n .silver-background {\n background-color: silver;\n }\n form{\n background-color:green;\n }\n\n\n<h2 class=“red-text”>CatPhotoApp\n\n <p class=“red-text”>Click here to view more <a href="#">cat photos.

\n \n <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.”>\n \n <div class=“silver-background”>\n

Things cats love:

\n
    \n
  • cat nip
    • \n
  • laser pointers
    • \n
  • lasagna
    • \n
\n

Top 3 things cats hate:

\n
    \n
  1. flea treatment
    2. \n
  2. thunder
    3. \n
  3. other cats
    4. \n
\n \n \n <form action="/submit-cat-photo" id=“cat-photo-form”>\n <input type=“radio” name=“indoor-outdoor” checked> Indoor\n <input type=“radio” name=“indoor-outdoor”> Outdoor
\n <input type=“checkbox” name=“personality” checked> Loving\n <input type=“checkbox” name=“personality”> Lazy\n <input type=“checkbox” name=“personality”> Energetic
\n <input type=“text” placeholder=“cat photo URL” required>\n <button type=“submit”>Submit\n \n"}
1 Like
12

are you trying to color the form element background color green?
i clicked the link above and that where it lead me

13

instead of #cat-photo-form
i believe your’e looking to make the

form
{
background-color:green;
}

14

I would use a more stable version of chrome. Canary is not good for production.

1 Like
15

The test does pass in canary for me, just FYI. But i would agree that the stable branch is probably a safer choice.

Can you try running the test in Incognito mode.

1 Like
16

yes I’m trying to do this

17

No,
I am making the style for the class cat-photo-form not (form) !