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.
<!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.
<!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.
<!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):
body { background-color: green;
}h1 {
color: white;
margin-left: 20px;
} |
Code for 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.
<!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.
body { background-color: lightgreen;
}h1 {
color: white;
margin-left: 20px;
} |
<!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.
Output 4: After Removing the “myexternal.css” reference file. Browser default values will be printed to the output
Conclusion: When multiple style sheets are cascaded in a single file, the output will be merged and displayed depending on the priorities set.