Just wondering which of these methods of styling has the priority while styling html:
<strong>Using style attribute:</strong>
The last example will win, because it's the same thing as your second example (both are inline
style properties), but happens later, overwriting
In general, it's (in descending order of priority):
styleproperties with the
!importantflag</li> <li>CSS properties with the
styleproperties without the
!importantflag</li> <li>CSS properties without the
...where within the "CSS properties" area there's the entire realm of specificity.
The priority is exactly opposite your list. Linked CSS-stylesheets are overridden by inline-styles, and JS-added rules will override both linked and inline styles. They are actually overwritten in the moment - not stored, but on load / when the JS is run, it will overwrite current styles for the remainder of the session (or longer, depending on how the JS is set up).
One important thing to be aware of, is the CSS Specifity. That means, different methods of writing CSS have different priority when the browser have to apply the styles. Check this link for the documentation about CSS Specifity:
Hope it helps