Cascading Order of css

user_13010837 0
Viewed 121
<!DOCTYPE html>
<html>
<head>
<style>
img { 
    width:100%; 
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>

Hi, I have a question on why the <style> override <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">.for the order, is it inline element take higher order than document level??

css html
3 Answers

See the CSS2 specification:

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

Dorward_190680

The HTML attributes width and height pre-date CSS, and are much less flexible, so the creators of CSS needed to decide what happened if a document included both these old attributes and newer CSS rules affecting the same elements.

The short answer is that they decided the CSS rules should generally take precedence, allowing these attributes to be a fallback for older browsers that didn't process CSS at all.

For a more formal answer, we can look up the current specification defining the cascading and priority of CSS rules: CSS Cascading and Inheritance Level 3, which includes section 6.4: Precedence of Non-CSS Presentational Hints:

The UA may choose to honor presentational hints in a source document’s markup, for example the bgcolor attribute or s element in [HTML]. All document language-based styling must be translated to corresponding CSS rules and either enter the cascade as UA-origin rules or be treated as author-origin rules with a specificity of zero placed at the start of the author style sheet.

The terms "UA-origin rules" and "author-origin rules" are defined elsewhere in the document; the rules in your <style> tag will be "author-origin rules", whereas "UA-origin rules" are built into the browser (the "User Agent" in the jargon of specifications), and always have lower precedence.

The term "specificity" is actually defined in a separate specification, but in a nutshell a rule like img.some-class {} has a higher specificity than a rule like img {}.

So put it all together, and your width and height attributes are defined as either:

  • Equivalent to "UA-origin rules", which are always lower precedence than rules defined in a <style> tag.
  • Equivalent to "author-origin" rules, like the rules in your <style> tag, but with the lowest possible specificity. That means they will be over-ridden by any other matching rule, except other minimum specificity rules like * { width: 100%; }
user_1579570

The inline width and height are not style related, it is more like attribute related. So as to not get confused with debugging and conflicts it was decided in favor of more centralized and better managed system - CSS. Why? Because it is more related to the developers concept of Model-View-Controller, and althought relation is not direct, it basically encourages you to manage your site's style through CSS as better managed and more centralized than inline attributes.

user_80013660
Related