Skip to content

Override CSS style in HTML | Inline or External CSS

External CSS override by inline CSS and inline CSS will override by only !important keyword. You can use it in a style tag or external CSS file.

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

Override CSS style in HTML (All type CSS)

To only way to override inline style is by using !important keyword beside the CSS rule. Let’s see below an example code of it.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div {
            color: blue !important;
            /* Adding !important will give this rule more precedence over inline style */
        }
    </style>
</head>
<body>
    
   <div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>
</body>
</html>

Output:

Override CSS style in HTML

Override external CSS with inline-style

Let’s see how to make one CSS class override another using style tag.

<body style="padding:0px ! important;"> 

Q: How to override inline CSS without using important?

Answer: You can’t do it, inline style takes precedence, you can override it only with !important.

Q: Can I override inline ” !important “?

Answer: You cannot override inline CSS if it has !important. It has higher precedence than the style in your external CSS file. , there’s no way to override an inline !important.

Must Read – CSS Specificity by MDN 🔗

Do comment if you have another way or example code or any questions on this tutorial.

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

3 thoughts on “Override CSS style in HTML | Inline or External CSS”

  1. This seems very helpful but I’m not a great html expert, so here’s my question:

    I’m working with a management software to create an online wine list. It has a default style (guessing external template) which only allows me to change between regular, italics and bold. Now for some items I’d like to change font color, which I managed to do so in html, but it only shows in the software itself, not on the actual wine list.

    Basically I only have a “body” to work with (or so it seems to me), is there anyway to override the style sheet from the body?

    I can provide screenshots to explain better.

    Thanks in advance!

Leave a Reply

Your email address will not be published. Required fields are marked *