Trying to make the cat pictures pixels smaller what am i doing wrong. how and where do i make the class to make the image smaller

HTML-CSS
1 
<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;
}
</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 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="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 (X11; CrOS x86_64 13421.73.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.112 Safari/537.36.

Challenge: Size Your Images

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section of your post. You seem to have accidentally deleted this section.

The more information you give us, the more likely we are to be able to help.

3

Hi @wraffield22!

Welcome to the forum!

Your challenge is to create a class called smaller image and then in the style section apply a width of 100px to that smaller image class.

Are you confused about creating a class? Are you confused about how to apply a width to a class?

The more information you can provide us with what you are struggling with the better we are able to help you.

4

yes sorry! Im not sure how where to add the class or applying the smaller image element.

5

You have to add the class smaller-image to the img that is in the page there is only one img in this page. To explain how to add class to an element lets say i have an img element

<img scr="mycoolwebsite.com/cool-img.jpg" alt="cool image">

to add a class let’s say cool-style to it we just have to use a property called class and give the value cool-style to it like this :

<img scr="mycoolwebsite.com/cool-img.jpg" alt="cool image" class="cool-style">

Now that i have added the class to my img element i will apply some style to the class in my external .css file or inside the <style> tag. Here i’ll use style tag. And i would like to make my image 400px high and 400px wide. So i’ll do this :

<style>
       .cool-style{
       height: 400px;
       width: 400px;
}
</style>

I hope that makes sense. If not feel free to ask more questions.

1 Like