No class.... the program won't recognize CSS command

I added the class as requested to the image. The program won’t accept it.
I tried removing the second class= and just left the attributes but it still doesn’t work. What am I doing wrong?

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
}

.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://bit.ly/fcc-relaxing-cat" 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="/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/80.0.3987.149 Safari/537.36.

Challenge: Add Borders Around Your Elements

Link to the challenge:

You are trying to use 2 classes in the same HTML code. 1st the image and then the added one.
Is this what you want?

Yes, but the classes both apply to the same image.

Is it possible to merge them together? Since they both apply to the same image?
Imagine if you would make a code and you would have to add class for each one that apply to the same element would’t you end up with over 200+ extra classes?

Simple, I’m trying to get both classes to work with the same image.
<img class=“smaller-image” class=“thick-green-border”
Why won’t it work? I also tried:
<img class=“smaller-image” “thick-green-border”
but no go.

you can put both classes in the same “class=”. you just need to seperate them with a space

You need to take out the extra “” and just separate them with a space
<img class=smaller-image thick-green-border"

Yeah, I just showed that in my previous comment. It still doesn’t work.

try putting them both in the same quotation mark

You should only use one class property. However, you can put more than one class inside of it separated by a space.

It could look like this:

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

Check the link here for demo.

OK I forgot to take out the parenthesis. They need to say this in the lesson. Thank you for your help!

1 Like

Thank you! It works now.