Img element, class="smaller-image"

[Abiola]

Tell us what’s happening:
Describe your issue in detail here.
This is the code

  **Your code so far**

<style>
.smaller-image {
  width: 100px;
}
</style>
<img class="smaller-image"/>




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

<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 (Linux; Android 10; CPH2185) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.104 Mobile Safari/537.36

Challenge: Size Your Images

Link to the challenge:

freeCodeCamp.org

[LucLH]

Hi @Abiola,

There are few issues in your code, let me show you first a good structure for that case:

<style>
  h1 {
    color: red;
  }
</style>

<main>
  <h1>A title</h1>
</main>

In your page, if you use the style tag, you only need one block. In your code you created few style blocks, which is syntactically not correct. Try to fix that first.

Other thing, you only need to use the existing image already in the code:

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

It is here you will give the class. And in your style block you will create the CSS rule smaller-image.

If you update your code and still don’t understand what is happening, share with use the updated code.