very basic css image problem

OK, so I am having difficulty getting an image within a div container that already has specified image styling in the css to obey the a separate style using the html class tag.

In the CSS, I have this for the images within the div I am working on:

div.mid-content img {
margin-left : 20px;
margin-right : 17px;
}

so I make a separate one like this

div.mid-content img.second {
different styling here
}

and set the image in the html to:

<img class="second" src="blahblahblah.png />

But for some reason it is not using the "second" class styling, but instead the "div.mid-content img" styling.

What am I doing wrong here?

 

would it be possible anyone could solve this tonight?

 

If you want entirely separate styling then try just using this:

.second {
different styling here
}

Code (markup):

 

Nope, won't work.

Are you stalking me Blinkilla?

I found a work around by placing the image in a <p> tag, but I am still curious as to how I give separate styles for images within a div that already has styles set for images within that div.

 

Figured it out ... it turns out I was using the correct code, but had not put any styling into the new class (in the external css), so it defaulted to the img styling for that div.

dumb error ...