A cascade layer is declared using the @layer CSS at-rule, which can also be used to specify the hierarchy of precedence when there are multiple cascade layers. With this, web developers have more control over cascades as a result of rules that layer cascades together. Any styles that are not in a layer are collected and added to a single anonymous layer that follows all named and anonymous layers that have been declared. This implies that regardless of their level of specificity, any styles declared outside of a layer will take precedence over those declared inside.
Approach:
- In the HTML file, create a HTML div and add a paragraph tag with some text.
- In the CSS file, we will create the cascading layers using the @layer CSS at-rule.
Syntax:
Single layer: In this, “layer-name” is the name of a particular layer and rules are the list of the CSS rules for the layer.
@layer layer-name {rules}Multiple layer: For defining multiple layers, we use the above syntax and their precedence is from left to right which means the highest precedence is to the right most layer.
@layer layer-name-1, layer-name-2, layer-name-3;
Example 1: Lets see an example of how anonymous layers precedence is greater than any defined layer.
- In the below example we have used a paragraph tag inside a div with class “gfg-container”
- In the CSS file we have written two styles for the paragraph, one inside the layer and one outside.
- The paragraph style defined outside the layer is of higher precedence than the layered item style of the paragraph, so even if we write the @layer rule below the paragraph style which is outside, it will take the styles of the outside or the anonymous layer which is formed.
- The layer paragraph styling are applied due to precedence order.
HTML Code:
<!DOCTYPE html><html>
<head>
<title>Layers</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gfg-container">
<p>Welcome to Geeks For Geeks</p>
</div>
</body>
</html>
|
CSS Code: The following code is the “style.css” which is used above.
p { color: green;
}@layer gfgExample { .gfg-container{
font-weight: bold;
font-size: 20px;
color: black;
background-color: grey;
}
} |
Output:
@layer at-rule
Example 2: Let us see an example without any anonymous layers.
- Create a HTML file with a div containing a h1 tag with defining 2 layers.
- You will get an idea, that the layer name which was defined first has a precedence value less than the second, so the styles mentioned in the second layer would override the styles in the first which are common. The CSS color property was common, so the color mentioned in the second layer is applied and all the other styles of the first layer are also applied.
HTML Code:
<!DOCTYPE html><html>
<head>
<title>Layers</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gfg-container">
<h1>Welcome to Geeks For Geeks</h1>
</div>
</body>
</html>
|
CSS Code:
@layer first, second; @layer second{.gfg-container h1 {
color: green;
}
}@layer first { .gfg-container h1 {
font-weight: bold;
font-size: 20px;
color: black;
border: 2px solid darkgreen;
}
} |
Output:
@layer at-rule precedence order