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:
2 Way:
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 ??