How can I override inline styles with external CSS?

The only way to override inline style is by using !important keyword beside the CSS rule. The following is an example of it.

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }

<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

Important Notes:

• Using !important is not considered as a good practice. Hence, you should avoid both !important and inline style.

• Adding the !important keyword to any CSS rule lets the rule forcefully precede over all the other CSS rules for that element.

• It even overrides the inline styles from the markup.

• The only way to override is by using another !important rule, declared either with higher CSS specificity in the CSS, or equal CSS specificity later in the code.

• Must Read – CSS Specificity by MDN 🔗