I’am now in a process of learning CSS. Well, the problem is that i have read in a css tutorial about the precedance of different types of style sheets when they are used simultaneously in a single webpage which is as follows:
1.Browser default
2.External style sheet
3.Internal style sheet (in the head section)
4.Inline style (inside an HTML element)
where number four has the highest priority.
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or in a browser (a default value).
But in an example i have tried:
<html>
<head>
<style type="text/css">
img{height:auto;}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="100" /><br />
</body>
</html>
The problem is that actually here internal style is overriding the inline style and any changes made to the height in inline format is not changing the image height.
The element doesn’t have inline style (which would be supplied by a style attribute, not a height or width attribute). It is presentational HTML attributes.
CSS always overrides presentational HTML attributes.