Need help solving Simple CSS problem Plz! :(

[SoulShader]

I can’t get this code to work:
How do I size my Image?

The question is telling me to do this…

“Create a class called smaller-image and use it to resize the image so that it’s only 100 pixels wide. Your img element should have the class smaller-image .
Your image should be 100 pixels wide.”

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

[ALLESS]

Before we can answer your question:

Go ahead, and Copy and paste the entire code from the Tutorial that you are working through Here, and pre format it.

To share code, you can use the Preformatted text button.
This allows you to share raw code :

Just select the code that you want to keep raw, and press the button.

The image on the right is raw code .

Then leave a link to the Tutorial that you are on.

freeCodeCamp.org

[JeremyLT]

@SoulShader

Create a class called smaller-image

I don’t see where you have tried to do this. Can you share code where you have tried to do this?

Is there a portion of the instruction on the first part of this that we can help explain better for you?

[joeltmsilva]

E só chamar sua “class” !
Exemplo:

.smaller-image { width: Por o seu valor ; height: Por o seu valor; }

também da pra usar o ‘picture src’
Espero ter ajudado com o exemplo!

[ALLESS]

IN THIS TUTORIAL:
We are being asked to

Create a class called smaller-image and use it to resize the image so that it’s only 100 pixels wide.

FIRST: To add the class to the image:

<img src=“https://cdn.freecodecamp.org/non-curriculum/non-cat-photo-app/non-relaxing-cat.jpg” [ WE ADD THE CLASS HERE ] alt=“Some cat lying on its back.”>

Adding the class="smaller-image" looks like:

<img src=“https://cdn.freecodecamp.org/non-curriculum/non-cat-photo-app/non-relaxing-cat.jpg”class=“smaller-image” alt=“Some cat lying on its back.”>

---

SECOND: We add the class to the CSS:
between the <style> </style> tags:

.smaller-image {
width: 100px;
}

PLACE THE CSS WITHIN THE STYLE TAGS:

[SoulShader]

Thank you so much! I got so lost on this problem! But I finally was able to fix it thanks to your help and everyone in this forum. I am forever grateful. I am a newbie programmer and trying to learn as much as I can. Studying to become a software engineer!

[ALLESS]

This Tutorial is not Explicit about everything that needs to be done to pass, a lot of people have some difficulties with the Instructions.

[SoulShader]

Exactly! Yeah it gets confusing at times. But now I’m doing just fine and progressing through it! ^FT^