How CSS style overriding works ?

Last Updated : 12 Jun, 2022

In this article, we are going to learn how CSS style overriding works. Cascading Style Sheets referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.

Overriding: Overriding in CSS means that you are providing any style property to an element for which you have already provided a style. For example, if you have provided some style to an element by using the external CSS and after that, you need to change the CSS but if you didn’t find where you have written the code then you can just override the style by using in-line CSS which has the highest priority.

Order of priority

inline stylesheet (highest) >> <style>…</style> tags >> external style sheet(lowest)

Inline stylesheet: If you are using any Inline stylesheet, then it takes the highest priority, and therefore, it will override any property defined in <style>…</style> tags or property defined in an external style sheet file.

Style tag: If you are using any property defined in <style>…</style> tag, it will override the property defined in any external style sheet file.

External CSS: If you are using any property defined in the external style sheet file then it takes the lowest priority, and the property defined in this file will be applied only when the above two properties are not applicable.

Example1: In the below example, we have overridden the property. First, we have defined header1 color to red with a style tag then overridden header1 color to green by using an inline stylesheet.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Simple webpage
    </title>
  
    <!-- Stylesheet of web page -->
    <style>
        body {
            text-align: center;
           
        }
  
        h1 {
            color: red;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
  
     
<p>A computer science portal for geeks</p>
 
</body>
  
</html>

Output:

Example2: In the below example, we have overridden the property. First, we have defined <div> color to grey using <style> tag then overridden <div> tag color to green by using an inline stylesheet.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Simple webpage
    </title>
  
    <!-- Stylesheet of web page -->
    <style>
        body {
            text-align: center;
           
        }
  
        h1 {
            color: red;
        }
         
        div{
            width:150px;
            height:100px;
             
            background-color:grey;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
  
     
<p>A computer science portal for geeks</p>
 
    <div style="background-color:green">
         
    </div>
</body>
  
</html>