Override bits of a CSS class while inline? - css

Question

I have an html img that is being styled by a CSS class. I would like to override the width and height values used in that class under some circumstances.
I'm building this img tag using something called a TagBuilder class, provided by Microsoft for the .Net system, which allows developers to assign attributes to an html element.
In this case a CSS class has been assigned to the img tag, and I can assign width and height attributes individually, but they're not taking precedence over the values set in the CSS class.
My tag looks like this currently:
<img alt="my link" class="static" height="240" id="StaticImage" src="http://imageserver.com/myImage.jpg" width="240">
The static CSS class has width and height values of 300 each, and as you can see I'm trying to override them with 240. It's not working in this instance but can I do it without a second CSS class?

Answer 1

You can add a style attribute to your img:
<img alt="my link" class="static" height="240" id="StaticImage"
src="http://imageserver.com/myImage.jpg" width="240"
style="height:240px;width:240px;">

Answer 2

You can either use inline css
<img alt="my link" style="width:240px; height:240px;" class="static" id="StaticImage" src="http://imageserver.com/myImage.jpg">
OR
in your css, you can define the style with a !important modifier
.static {
width:240px !important;
height:240px !important;
}
That way, regardless of everything, your width, height will always be used.

Answer 3

Try narrowing down your element selection as much as you can. The more specific, the better chances you have to override a declaration. Per example, add the class AND the ID of the element:
#StaticImage.static {
height: 240px;
width: 240px;
}
You can even go crazy and add its attribute:
#StaticImage.static[alt=my link] {
height: 240px;
width: 240px;
}
If it fails, raise its priority:
#StaticImage.static {
height: 240px !important;
width: 240px !important;
}
You can make it even more specific by including its parent element. Can inline css override everything else? Sure, but if you can add inline css, why don't you add another class instead to narrow your selection even more? That way you can control all your css within your file.
Also, check if there's a line of JavaScript forcing the element's size. JavaScript can alter the css value, no matter what it is.