0

Just wondering which of these methods of styling has the priority while styling html:

Using CSS:

div{background-color:yellow}

Using style attribute:

<div style="background-color:red"></div>

Using script: 

document.getElementsByTagName("div")[0].style.backgroundColor="green";
  • Style properties on elements have higher priority than CSS stylesheet rules. This is something you could determine through simple experimentation on jsfiddle or codepen, of course. – Pointy Dec 19 '16 at 15:33
  • Javascript first, inline second, normal third. So javascript overwrites them all. – Ionut Necula Dec 19 '16 at 15:33
  • #1 is the best practice, but #2 and #3 have higher (equal) priority. – Jon Uleis Dec 19 '16 at 15:34
  • 1
    @Ionut It really depends _when_ the javascript is being executed... ! – IronAces Dec 19 '16 at 15:34
  • @DanielShillcock, of course, if he puts it in head tags wihout an onload function then the element won't be found. So it will apply the inline style. – Ionut Necula Dec 19 '16 at 15:41
  • This may well be a duplicate, but certainly not of the previously-chosen [*Does embedded css always override external css ?*](http://stackoverflow.com/questions/31369919/does-embedded-css-always-override-external-css), where the question and answers address themselves to `style` vs. `link` elements, not inline style vs CSS. – T.J. Crowder Dec 19 '16 at 15:48

3 Answers3

5

The last example will win, because it's the same thing as your second example (both are inline style properties), but happens later, overwriting red with green.

In general, it's (in descending order of priority):

  • Inline style properties with the !important flag
  • CSS properties with the !important flag
  • Inline style properties without the !important flag
  • CSS properties without the !important flag

...where within the "CSS properties" area there's the entire realm of specificity.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
1

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).

junkfoodjunkie
  • 3,168
  • 1
  • 19
  • 33
  • To add to this - "overridden by JS-added rules" may be confusing. The rules are actually replaced with new ones, not "cascaded over". I think this is what you meant but I thought it should be clarified. – bcr Dec 19 '16 at 15:35
  • True. I have amended the answer, expanding a little on how JS / CSS works. – junkfoodjunkie Dec 19 '16 at 15:48
0

The css belongs to the css files, so using CSS is the normally the best option.It's better because is more readable, and its better organized than putting it directly in the html or via javascript.

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:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Hope it helps

Daniel Santiago
  • 205
  • 1
  • 8