Open In App

How to decide order of precedence of style attribute in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will know about the order of precedence of style attributes in HTML. The type of style being considered more important than the other is known as the precedence of style.  Order of precedence of style attribute handle your web output. Basically,  it executes from top to bottom in HTML but the nearest or closest style rule to the tag or element executes finally.

Syntax:

<tag style="property:value;">

Order of Precedence:

Note: Order of precedence of Inline styles is greater than internal and external style attributes, which means the order of precedence decreases from top to bottom.

Example 1: Let us have a CSS and HTML code as an example.

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">
    <!-- Title of the site -->
    <title>Precedence of style in HTML</title>
    <!-- linking the css file (external style attributes)-->
    <link href="main.css" type="text/css" rel="stylesheet" />
    <!-- below is internal style attributes -->
    <style type="text/css">
        p {
            background-color: yellow;
            font-size: x-large;
        }
    </style>
</head>
 
<body>
    <h1>Welcome to GFG learning</h1>
    <!-- we are using style at p tag -->
    <p style="background-color: lightgreen;">
        <b> Welcome to geeksforgeeks </b>
    </p>
    <p><b> Data structure & algorithm</b></p>
    <p><b> Web development</b></p>
    <p><b> Competitive programming</b></p>
</body>
</html>


main.css: We declare an external style attribute in the below CSS file.

Filename: main.css 

CSS




p {
    background-color: cyan;
    font-size: larger;
}


Output: 

 

Inline styles: Inline-styles are placed within the opening tag. Inline styles override external and internal.

Syntax:

<p style="background-color: colorname">Web development</p>

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">
    <!-- Title of the site -->
    <title>Precedence of style in HTML</title>
 
    <!-- linking the css file (external style attributes)-->
    <link href="main2.css" type="text/css" rel="stylesheet" />
 
    <!-- below is internal style attributes -->
    <style type="text/css">
        p {
            background-color: yellow;
            font-size: x-large;
        }
    </style>
</head>
 
<body>
    <h1>Welcome to GFG learning</h1>
    <p>
          <b> Welcome to geeksforgeeks </b>
    </p>
    <!-- Declaring Inline style. -->
    <p style="background-color:lightcoral;">
        <b> Data structure & algorithm</b>
    </p>
    <p>
      <b> Web development</b>
   </p>
    <p>
      <b> Competitive programming</b>
    </p>
 
</body>
</html>


Filename: main2.css 

CSS




p {
    background-color: lightcoral;
    font-size: larger;
}


Output: 

 

Conclusion: You can see inline style overrides internal and external styles.

Internal (Embedded) styles: These style sheets are placed within the head tag. Internal styles override external but it does not override inline styles because inline styles have higher precedence.

Syntax :

<style>
    p{
        background-color: colorname;
    }
</style>

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">
    <!-- Title of the site -->
    <title>Precedence of style in HTML</title>
 
    <!-- linking the css file (external style attributes)-->
    <link href="main3.css" type="text/css" rel="stylesheet" />
 
    <!-- below is internal style attributes -->
    <style type="text/css">
        p {
            background-color: yellow;
            font-size: x-large;
        }
    </style>
</head>
 
<body>
    <h1>Welcome to GFG learning</h1>
    <p>
        <b> Welcome to geeksforgeeks </b>
    </p>
    <p>
        <b> Data structure & algorithm</b>
    </p>
    <p>
        <b> Web development</b>
    </p>
    <p>
        <b> Competitive programming</b>
    </p>
</body>
</html>


Filename: main3.css 

CSS




p {
    background-color: cyan;
    font-size: larger;
}


Output:  

 

Conclusion: As you can see by the above example internal style attributes override external style attributes. It prefers CSS-style codes.

External styles: These styles are placed in an external sheet (i.e. CSS file). We link the CSS file in the head of the HTML. If more than one CSS file is linked, then the order in which they are placed is considered.

Syntax:

<link href="main.css" type="text/css" rel="stylesheet"/>

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">
    <!-- Title of the site -->
    <title>Precedence of style in HTML</title>
 
    <!-- linking the css file with (external style attributes)-->
 
    <link href="main4.css" type="text/css" rel="stylesheet" />
 
</head>
 
<body>
    <h1>Welcome to GFG learning</h1>
    <p><b> Welcome to geeksforgeeks </b></p>
    <p><b> Data structure & algorithm</b></p>
    <p><b> Web development</b></p>
    <p><b> Competitive programming</b></p>
</body>
</html>


Filename: main4.css

CSS




p {
    background-color: cyan;
    font-size: larger;
}


Output: 

 



Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads