How to override inline styles with external in CSS ?

Last Updated : 26 Jun, 2022

In this article, we are going to learn how we can override inline styles with external CSS. Generally, we use inline CSS to override all the other styles. In some circumstances, we have to do the opposite. We have to override the inline CSS which has come from foreign sources and cannot be removed.

Approach: To override the inline CSS, !important keyword is used. This makes the CSS property precede all the other CSS properties for that element.

Used Keyword:

!important: This keyword can be used with a CSS property in inline, internal, or external CSS. This specifies that the property with which it is used will be given the highest priority for that element.

The below example demonstrates the above approach.

Example 1: The below code demonstrates how the color of the heading is changed by the external CSS using the !important keyword.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>
        How to override inline styles with external CSS
    </title>
</head>

<body>
    <h1 style="color:green; margin:2rem;">
        GeeksforGeeks
    </h1>
    
    <h3 style="margin:2.2rem;margin-top:-2rem;">
        How can I override inline styles with external CSS
    </h3>
    
    <div style="border: 10px solid red;
                width: 10rem; height: 10rem; 
                margin: 2rem; align-content: center; 
                display: flex;justify-content: center;">
        GeeksforGeeks
    </div>
</body>

</html>

style.css: This is the external CSS used in the above HTML code.

CSS

h3 {
    color: brown !important;
}
div {
    border-color: green !important;
    width: 20rem !important;
}

Output:

Example 2: The code below demonstrates how we can override the display, width, and height of the div elements given in the inline CSS with the external CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style1.css">
    <title>
        How to override inline styles with external CSS
    </title>
</head>

<body>
    <h1 style="color:green;margin:2rem;">
        GeeksforGeeks
    </h1>

    <h3 style="margin:2.2rem;margin-top:-2rem;">
        How can I override inline styles with external CSS
    </h3>
    
    <div class="container" style="display:block">
        <div style="border:10px solid red; width:10rem; 
                    height:10rem; margin:2rem;
                      align-content:center; display:flex; 
                    justify-content:center;">
            GeeksforGeeks
        </div>
        <div style="border:10px solid red; 
                   width:10rem; height:10rem; 
                   margin:2rem; align-content:center; 
                   display:flex; justify-content:center;">
            GeeksforGeeks
        </div>
    </div>
</body>

</html>

style1.css: This is the external CSS used in the above HTML code.