Unable to div an image?

HTML-CSS
#1

at first in html: <img src="images/cat.png" alt="cat">
in css: img{}
result: works fine

but I don’t want to use img, so I gave it a div.

then in html: <div class="cat"> <img src="images/cat.png" alt="cat"> </div>
in css: .cat{}
result: ALL CSS PROPERTIES ARE GONE!

WHAT DID I DID WRONG? isn’t this the correct syntax?

#2

You might want to try

.cat > img {}

Previously you applied your styles to the img directly. However, I don’t see why you would not simply do:

<img class="cat" src="images/cat.png" alt="cat">

.cat {}
#3

Using ‘External Style Sheet’, then makes class with name

div.cat {
  background-image: url("cat.png");
}
#4