Sizing an Image using CSS

Hi Guys

Wandering if you can help.
I keep getting this error message:
“Your img element should have the class smaller-image”
I thought that: .smaller-img was the class
Can anyone tell me where I am going wrong?

Many thanks:

.smaller-image { width: 100px; }

.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;
}

img {
width :100px
}

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

What does your HTML look like?

All of your CSS is correct, and you’re right that .smaller-image is a class. However, the error message you’re receiving is not saying that your CSS is incorrect, but instead, that you are not applying your CSS to your HTML properly.

Assuming I had a class called .big-div, and I wanted to apply it to a div element, my code would look like this:

CSS

.big-div { width: 1000px; }

HTML

<div class="big-div"></div>

Note that when giving an HTML element a class, you omit the period, meaning that the following syntax is incorrect:

<div class=".big-div"></div>

Mmm…You are okey, but be sure to create the class in the style sheet and then add it to your <img> html element.

Your img element should look like this:

<img class="smaller-image" src=....>

As I can see in the devtool, in the code you have attached, the image doesn´t have any class. Check it!

@Victor and Azgard that’s great thanks very much. The way you both explained it makes sense. That’s awesome, much appreciated.