Add Style to The Borders

[heinrich1016]

Hello, I have not executed this quite yet. I am having a hard time understand what is trying to be said here. Is there anyone that can put it in simpler terms.

Remember that you can apply multiple classes to an element using its class attribute, by separating each class name with a space. For example:

<img class="class1 class2">

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

.smaller-image {
  width: 100px;
}
</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" 
class="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>
  <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/100.0.4896.127 Safari/537.36 Edg/100.0.1185.44

Challenge: Add Borders Around Your Elements

Link to the challenge:

freeCodeCamp.org

[ilenia]

@heinrich1016

class="class1 class2"

you can give both class1 and class2 (so two different classes) to your element like this

[kevinSmith]

It is telling you that you can apply multiple classes to things. If we are talking about a p element. I can give it no classes:

<p>Howdy!</p>

Or I could give it one class:

<p class="big-text">Howdy!</p>

or two classes:

<p class="big-text special-font">Howdy!</p>

or more:

<p class="big-text special-font wide-margins">Howdy!</p>

So your issue is that you have tried to give it a a class twice instead of giving it two classes:

class="smaller-image" 
class="thick-green-border"

That is not the right way.

The other issue is that you have to define your class of thick-green-border somewhere.

[heinrich1016]

Thank you so much for the advice, that is what I needed. I understand and the why you explained it makes sense.
I wish you well!