Help - Add Borders

HTML-CSS
1

Tell us what’s happening:
I can’t solve the 2nd challenge. I think it’s a matter of placement or incorrect command. Exasperated over what I think should be very simple.
Thanks for your help!

https://learn.freecodecamp.org/responsive-web-design/basic-css/give-a-background-color-to-a-div-element

Your code so far

<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://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div>

    <div class="silver-background">
2

The template code already included a div. You shouldn’t add another one.

1 Like
3

It seems there would be a need for encoding .silver-background?

It errors me if I leave only the line in div but it doesn’t matter where I put the .silver - it doesn’t satisfy #2.

4

You forgot to close the div and the main tags, and you dont need another div with
.silver-background.

1 Like
5

hm, ok, I see the /div after the /ol and the /main right afterwards?

6 
  <div>

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

I solved it!
I added to style

div {

background-color: silver;
}
it worked!

1 Like
9 
<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;
  }

  div {
    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://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div>
    <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>
10

Yes, that is what I thought. You actually got lucky to pass the tests, because your selector makes the background color of all div elements silver. If there would have been other div elements, it would have made their backgrounds silver also.

Another reason I say lucky is because it appears the test behind the scenes is not checking that you created a class named silver-background between the style tags.

What the challenge was expecting you to do was add the following between the <style> and </style> tags:

.silver-background {
background-color: silver;
}

and add the following to the existing div element:

<div class="silver-background">

You had the style part correct in your first post, but you had the extra div element which was what caused you to fail the tests.

12

actually, I think that’s what I did to begin with and it didn’t pass (the second challenge)

Thanks so much for helping!

1 Like