Overriding Inline Styles with external CSS
In this post we will give you information about Overriding Inline Styles with external CSS. Hear we will give you detail about Overriding Inline Styles with external CSSAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to override inline styles using an external CSS file.
Css inline styles have first priority in applying styles to the html elements so that we can’t override the inline styles with normal css rules.
<div style="color:green;"> <h1>This is green color</h1></div>
.container{ color: black; /* this rule will never apply */}In the above example, we have added style attribute and container class to the div element but we will still see green color.
To override the inline styles we need to use !important rule in our external css file.
Example:
<div style="color:green"> <h1>This is black color</h1></div>
.container{ color: black !important; /* this rule will override inline-style */}Note: The !important rule not only override inline styles but also override other styles applied to that element.
Hope this code and post will helped you for implement Overriding Inline Styles with external CSS. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs