Define different cascading methods that can be used inside the cascading order

Last Updated : 18 May, 2023

In this article, we will understand, The Cascading order concept. It determines property values originating from different sources that can be combined together. The following steps apply to the cascading algorithm:

Relevance
Origin and Importance
Order of appearance
Specificity

We can specify CSS style in multiple ways but at the end, they will all cascade into one style sheet at the end. When a variety of styles are used in HTML elements, they will cascade with the priority defined as under:

Priority number	method name
1	Inline styles
2	External and internal style sheets
3	Browser default

Sometimes when multiple style sheets are merged, they may have conflicts. If multiple styles are defined that have the same priority level, the last defined will have the highest one. The cascading priorities could lead to confusion and may lead to overuse of the “!important” rule.

Example showing the use of ! important:

The ! important rule in CSS adds priority to a value or property than its normal. If ! an important rule is specified, it overrides all the styling effects set previously for that element.

Approach:

Create an HTML file with the two <h1> tags in the header section
- first <h1> applies green color to the fonts
- declare this as a priority using “!important”
- second h1 tag applies blue color to the fonts
As per the priority, the effects will be applied as per the latest tag (second h1 tag with blue color)
using !important will simply reverse the scenario
It gives priority to the first h1 tag when used with it.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green !important;
        }
 
        h1 {
            color: blue;
        }
    </style>
 
</head>
 
<body>
    <h1>
        GeeksForGeeks!
    </h1>
    <h2>
        Welcome to the world of programming.
    </h2>
</body>
</html>

Output (when important is applied):

Output (without !important rule):

Now we will understand the different cascading order methods and then combine them all together to see the integrated effect. Since these styles can be of different types, we will look into each of these one by one.

Method 1: inline styles (Highest priority)

Inline CSS can be applied to a single element. It is one of the techniques that will insert style sheets in an HTML document. In inline CSS, a style attribute is added to the relevant tag that needs to be styled.

Example: We will apply the inline style in a single piece of code. Since it has the highest priority, any other styles, if applied, will be hidden behind the inline style code. We will define<p> tag with special styles every time to create different effects.

Approach:

The Initial <p> tag is created with no effect, as a regular paragraph
The second <p> tag will have
- font-size: 25 px
- font color: green
Third <p> has 30 font sizes in pink color.
Both the second and third tag has inline styles applied.

Example: In this example, we are using the above-explained.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Cascading Order</title>
</head>
 
<body>
    <h1>
        This is Example of inline css
    </h1>
    <p>
        This is a paragraph with no effect.
    </p>
    <p style="font-size:25px; color:green">
        This is a paragraph with font size 25 and text color green.
    </p>
    <p style="font-size:30px; color:pink">
        This is a paragraph h with font size 30 and text color pink.
    </p>
</body>
 
</html>

Output:

Method 2: style sheets (internal or external )

There are two different approaches to adding the style sheets in the HTML document

Internal style sheet in the <head>
external style sheet via @import or <link>

Example (internal style sheet):

An internal style sheet is defined in the head section in the <style> tag. It helps to add a unique style to an HTML document. It is called embedded css that helps in styling a single page in an effective way. However, to use it on multiple pages would be unsuitable as we need to put the code on every page of the website to render the effect and it becomes time-consuming.

Approach

we will create an internal style sheet inside the <style> tag
apply green background color to the body
define header h1 with
- white fonts and
- left margin padded to 100 px

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Cascading Order
    </title>
    <style>
        body {
            background-color: green;
        }
        h1 {
            color: white;
            margin-left: 100px;
        }
    </style>
</head>
 
<body>
    <h1>
        GeeksForGeeks
    </h1>
    <p>
        This paragraph will not be affected.
    </p>
</body>
</html>

Output:

Example (External style sheet): Whenever we want to make editions or apply modifications to multiple pages, the external style sheet makes more sense. It facilitates to change of the entire website by just editing one line of code. The code should be placed inside the <link> tag in the <head> section.

Approach:

Write an external style sheet in any text editor with a .css extension. we will create a file called myexternal.css and put the code in it. Remember not to put any HTML elements in the CSS file.
Create an HTML file and inside the head section, create a link to the external style sheet
apply green background color to the body
apply header tag <h1> having
- white font colors
- left margin padded to 20px

Code for css file (myexternal.css):

CSS

body {
    background-color: green;
}
 
h1 {
    color: white;
    margin-left: 20px;
}

Code for HTML:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Cascading Order</title>
    <link rel="stylesheet"
          href="myexternal.css">
</head>
 
<body>
    <h1>
        GeeksForGeeks
    </h1>
    <p>
        This is a paragraph with no effect.
    </p>
</body>
 
</html>

Output:

Method 3:browser default

There is a default CSS value for all the elements if no style or special effects are applied. Ex. it will display as blue text with an underline for the links, white color background for the default value, and black fonts if nothing is specified.

Approach:

Create a HTML document
Generate different tags (here we have generated two tags – <h1> and <p>
Apply none of the effects (inline or internal).
We won’t even import the code from any external resources (.css file)

Example: In this example we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Cascading Order</title>
</head>
 
<body>
    <h1>
        GeeksForGeeks
    </h1>
    <p>
        This paragraph has no effects. It shows the output 
          having the browser-default values
    </p>
</body>
</html>

Output:

How cascading order works: Apply different methods in cascading order

As mentioned earlier, if different styles are combined for the HTML elements, they will cascade into the new styles with the priorities. The table mentioning the priorities is displayed at the beginning of the article. To visualize the effect, Collect all styles that can be applied to the HTML element.

Approach:

create a text file “myexternal.css” as mentioned below:
link to the external file in the <link> tag
create internal style inside <style >tag.
- Apply light blue background color in the internal style sheet
create inline css with the following properties
- the background color is green
- font color white

Example: Here is the implementation of the above-explained steps.

CSS

body {
    background-color: lightgreen;
}
 
h1 {
    color: white;
    margin-left: 20px;
}

HTML

<!DOCTYPE html>
<html>
<link rel="stylesheet"
      href="myexternal.css">
<style>
    body {
        background-color: lightblue;
    }
</style>
 
<body style="background-color: green; color:white">
    <h1> 
        GeeksforGeeks 
    <h1>
    <h1> 
        Cascading Multiple Style sheets 
    </h1>
    <p>
        We will remove style sheets one by one in order to set 
          the priority.
    </p>
    <p>
        This style sheet combines internal, inline and external 
          style sheet altogether.
    </p>
</body>
</html>

Output 1: All the style sheets are combined. Inline CSS has the highest priority

Output 2: After removing inline css code. Now, internal style sheet (light blue background) has the highest priority

Output 3: After removing the internal style sheet code (inline is already removed) the external style sheet “myexternal.css” will be referred to and will have the highest priority.