How To Override Inline Css

Prince Dhameliya Jun 10, 2022 0 719

In this topic,

We are going to see how to override inline CSS.

You can override inline CSS in 2 ways

1 Way:

You can override CSS using !important

First of all, I have added HTML in the index.html file.

<body>
  <div class="mydiv" id="mydivid" style="width: 500px"> test </div>
</body>

And I have add CSS in <style>…</style> tag on index.html file.

#mydivid {
    background: #ffc107;
    width: 200px !important;
  }

Output:

how to override inline CSS with !important.

First of all, I have added HTML in the index.html file.

<body>
  <div class="mydiv" id="mydivid" style="width: 500px !important"> test </div>
</body>

And I have add CSS in <style>…</style> tag on index.html file.

#mydivid {
    background: #ffc107;
    width: 200px !important;
  }

I have tried width overnight with !important but it’s not working and the output looks like this:

So I have tried another way.

I have overwritten CSS using jQuery

Now I added code in my <script>…</script> tag on index.html file.

$(window).on("load", function() {
      $(".mydiv").removeAttr("style");
      $(".mydiv").css("width","200px");
    });

I have removed inline CSS on window load and added new CSS.

So my CSS now working and the output looks like this:

I hope you found something useful ??

Web Developer