Change image size within a division - html

Question

I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>

Answer 1

you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.

Answer 2

You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.

Answer 3

Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}