I need help with this taks Please! Create a class called "smaller-image"

Tell us what’s happening:
Describe your issue in detail here.

I have to create a class called “smaller-image” and give it to my img element.
I already created the class, but I don’t know exactly where I should give the class to my img element.

  **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;
}
.smaller-image {
width: 100px;
}
p {
  font-size: 16px;
  font-family: monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class=".smaller-image">
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img 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

Challenge: Size Your Images

Link to the challenge:

You have two issues:

First,

<img class=".smaller-image">

That’s not how you give a class to an element. The period (.) shouldn’t be there. You need it in CSS so it knows that you are dealing with a class (as opposed to an id or an element), but you just need to give the name.

Next, you should give that class to the existing img, not create a new one.

1 Like

Hello there @VeroCP welcome to the FCC community.
Classes are attributes used by CSS and JavaScript to select and access specific elements.

The src in the <img> element is also an attribute and this means all attributes must be included inside the tag of the specific HTML element we desire.

If the element has an opening and closing tag like this:

<div> </div>

the attribute “must” be added/included in the first/opening tag like this:

<div class="desired-class" id="desired-id"> </div>

So to answer your question you need to properly include the smaller-image class inside of your img element as an attribute.

Happy coding :+1:!

1 Like

Hi Kevin!
Thank you for your help
I did it!!

1 Like

Hi Teami!
Thanks for your help!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.