How can I override inline styles with external CSS?

Question

I have markup that uses inline styles, but I don\'t have access to change this markup. How do I override inline styles in a document using only CSS? I don\'t want to use jQu

Answer 1

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 */
    }

    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