To only way to override inline style is by using !important keyword beside the CSS rule. 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?

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 🔗