Priority of inline style and internal style

Question

I have some HTML and CSS code like below

<html>
<head>
<style type="text/css">
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br />
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>

I remember that the priority of the three style is inline > internal > external. But the code above, the picture which class named 'big', an inline style set its heigh as 84px and its width as 95, why the internal style can affect the result style? Any one can help?

score 2 · Accepted Answer · answered Mar 09 '12 at 08:05

<img class="big" src="logocss.gif" width="95" height="84" />

In the above, width and height are not style rules, they are attributes of the element (which CSS is supposed to replace). I would have guessed that attributes overwrote style rules, but maybe it's the other way around. Either way, the basic answer to your question is that those aren't inline style, so you're understanding of priority is still correct. Try the following:

<img class="big" src="logocss.gif" style="width:95px; height:84px;" />

and see what gets applied.

Priority of inline style and internal style

1 Answers1