Css background color?

[3man75]

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 {    #COMMENT// HERE IS WHERE I HAVE THE SILVER #BACKGROUND CLASS END. THIS TEXT IS NOT ON PROGRAM
  background-color: silver;
  background: "silver-background";
}
</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"> #AND HERE I TRY TO ADD IT TO DIV CLASS
  <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">
  <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/101.0.4951.54 Safari/537.36

Challenge: Give a Background Color to a div Element

Link to the challenge:

freeCodeCamp.org

No idea why its not working for me. The picture seems to turn grey though…

[3man75]

It seems I fixed part of it.

.silver-background {

    background-color: silver;

    background: "silver-background";

  }

By adding the “.” to silver I got the 2nd of 3 challenges.

Your div element should have the class silver-background .

Your div element should have a silver background.

A class named silver-background should be defined within the style element and the value of silver should be assigned to the background-color property.

Now I struggle with the third and last one.

<div class="silver-background">

This is what I got so far.

[spark07]

Hi @3man75 ,

Why are you adding this ?

@3man75

background: "silver-background";

[Cryptic_X]

@FloatTop100vh Please try not to give solutions.
Giving solutions will not help people to learn

[ilenia]

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

[FloatTop100vh]

Try giving your div element the class of “silver-background”, I’m sure you’ve learned how to apply id’s and classes in previous freeCodeCamp lessons, so that’s sorted, now remove this property background: "silver-background"; from the code snippet you posted , that’s causing a problem.

[FloatTop100vh]

Thanks for correcting me! I understand now and I appreciate it

[3man75]

Hi Ilenia. I noticed that my progress has been wiped out in the courses I took. Why is that? All of what I have done has been un-checkmarked. Apologies for asking openly I am struggling to find or contact people on the website.

[ilenia]

The new Responsive Web Design curriculum content has been released.

FAQ:

1. Can I complete the old content?

• Yes. The old content is still available, and has been moved to the bottom of the curriculum map and renamed to Responsive Web Design Legacy

2. What will happen to my progress?

• Nothing. Your past progress will still be available in the Responsive Web Design Legacy curricula

3. Can I claim the old certificate?

• The certifications are exactly the same. All you need to claim a certificate is to complete the 5 Certification Projects which are identical for both the Responsive Web Design and Responsive Web Design Legacy curricula

4. Should I stop doing the legacy content, and just start over with the new content?

• This is entirely up to you. Majority of the topics are the same - just taught in a different way. (See Project-Based Curricula)

5. How do I use the new editor?

• The new editor is as close to an external text editor as we wanted to get it. If the files for the challenge have been enabled, you can access the index.html and styles.css tabs which you should use for the respective code.
• Two main differences between this editor and other online editors:
  • You need to link your styles.css file to your HTML (just like you would in real web-development), by adding the following line to the head of your HTML:

<link href="styles.css" />

• • You are encouraged to include the DOCTYPE, html, head and body tags for each project.