Hi! I'm new and could use some help. Could someone please explain why I got everything right in lesson 19 except the part about changing the thick border color green?

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

  .smaller-image {
    width: 100px;
    thick-green border
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
</style>
 
<h2 class="red-text">CatPhotoApp</h2>

<img class="smaller-image thick-green-border"src="https://bit.ly/fcc-relaxing-cat"alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
1 Like
  1. You have all of your border stuff inside your smaller-image class instead of declaring a new class.
  2. Look carefully at the name you used in the style sheet. You have a typo.
1 Like

code

heres everything you need to know

let me know if your missing something

Thanks for answering,

However, I’m still confused. Do you mean that I put the two img classes together in the .smaller-image section at the top
}

.smaller-image {
width: 100px;

.thick-green border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;

Do I also need to adjust more in the bottom part of the lesson or leave like below?
<img class="smaller-image thick-green-border"src="https://bit.ly/fcc-relaxing-cat"alt="A cute orange cat lying on its back. "> .

How do I separate the two img classes because I tried separating using above but lost the thick gray border that I had? What am I still doing wrong?

If you clarify, I would so appreciate it.

This is still confusing. I’m don’t remember anything like this. You’re saying that this is the code that I put like this:
above or below this:
}
.smaller-image {
width: 100px;
}

Please excuse me but would it be like this:

.classDefNum1 {
sameProperty1: small-image;
sameProperty2: width: 100px:
}
.classDefNum2 {
sameProperty1: thick-green border {
same Property2: width: 10px-solid-radius: 50%;
}

Is this the only way to get a green border?

no not necessarily
at your level this it the code

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>

let me know if you understand

Hi,

Thank you for your kind email. However, I am completely confused to make it work this way. I did get it to work to turn the box green in a different way. I know that your code works, but I am totally stumped as how you did it this way.

Where did the container-fluid come in for this in lesson 19?

I can see dividing the original 16 twice for those two div class lines.

Believe it or not, I even am getting library books out trying to understand this coding. This all is so new to me, but I am trying my hardest. I know that I must seem like a complete idiot but what did you mean here? I keep trying to go over it, but the more that I try, the more I lost I get.

Hi Randall,

You helped me solve that particular lesson. I only went to that same solved lesson because I thought another person was trying to teach me another method to do the same thing. However, I had no idea at all as to how he or she came up with that solution. This is where I got so confused. I am so happy that you said this person was referencing another problem because I assumed I was a complete idiot.

Here’s the lesson that you helped me solve. I am in lesson 85 now. This is what I understand and it works to form the green border from lesson 19:

Thank you so much, Randall, for being so thoughtful.

<p>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }
  
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
  
  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .smaller-image {
    width: 100px;
  }
</style>

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

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</p>

Got it! I’ll remember that for the future. You take care, Randall, and thanks again!