CODEWITHSUNDEEP
javascripthtmlcss
sawa
sawa

Reputation: 2050

Precedence order of execution of CSS styles

I am confused about the sequence of CSS styles that applies to HTML. I am creating HTML elements and adding styles from JavaScript. Additionally, I also have a stylesheet that applies to elements.

JavaScript:

element.style.someStyle = ' ';

element.classList.add('style');

CSS:

element { 
    someStyle = ' ' 
}

What will be the precedence order?

Upvotes: 1

Views: 2429

Answers (3)

Rohit416
Rohit416

Reputation: 3486

What is the sequence of application?

Following is the order of precedence of how the styles get applied.

  1. Inline - Placed in the HTML element tag itself.
  2. Internal - Placed in the view page inside a <style> tag.
  3. External - Placed in the external style sheet (.css) file.

That is to say - the styles which reside closest to the HTML tag will take the precedence.

To demonstrate this following is a short illustration:

/* external style sheet */
body
{
  background-color: red;
}
<!Document HTML>

  <style type="text/css">
    /* internal style */
    body
    {
      background-color: green;
    }
  </style>

  <!-- inline style -->
  <body style = "background-color: blue">

    <h1>Hey there!</h1>

  </body>

</HTML>

As you can see, the body has the blue color as per the precedence order, no matter what was defined in an internal/external style.

You can, however, make any style defined at any level to supersede with your style at any place using !important keyword with your styles but it should be used wisely and purposefully.

I am creating HTML elements from javascript and adding styles and classes.

Adding a style via JavaScript gets applied as an inline style on that particular tag. This means if you have written the same style somewhere else then it might not work unless you are using !important.

However, It is generally not recommended to add the styles through JavaScript because it decreases the performance of your webpage if you have been using it extensively.

A better approach would be to toggle CSS classes from JavaScript because this way you would not be switching CSS styles explicitly.

Upvotes: 2

Chillin&#39;
Chillin&#39;

Reputation: 182

external internal inline Javascript

Upvotes: 0

T04435
T04435

Reputation: 13992

Let's say YOUR website is a house;

HTML in your house is going to be all the walls, columns, and more. By themselves they look ugly.

CSS comes in place to put the style on them like painting, designs and more.

YOU first build the house(HTML), then you paint it(CSS). But with time you realize you need to add a new room to you house(HTML), the builder(JS) adds the new room, and put the CSS in place which gets applied to the new elements.

Every time the builder(JS) add a new part to the house(HTML), the designer(CSS) will styled it.

Now in practice:

you should load your CSS at the top (head tag) so all styles are ready once needed. In the others hand the JS, should be loaded at the end before the closing tag of the body.

Upvotes: 1

Related Questions