CSS overriding width and height attribute. Why? [d

Question

This question already has an answer here:

• The difference between specifying image size in html or css 1 answer

When I have an image with attributes width and height my css is overriding these attributes but if I have inline-styles with width and height my external css doesn't override the inline-styles. Why?

Example code without added CSS:

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />

Example code with added CSS:

.pic {
  width: auto;
  height: auto;
}

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />

Example code with inline style:

.pic {
  width: auto;
  height: auto;
}

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" style="width: 100px; height: 100px" />

Answer 1

For override a property like "width" used directly in the html tag on this way "div style="width: 100" is necessary that you put !important after your css code, for example something like this:

.pic {
   width: auto!important;
   height: auto!important;
}