Difference between cascade and specificity in CSS 🚀
👇🧵
👇🧵
Don't forget to bookmarked it for future references...
★ Cascade
• Cascade refers to the order in which CSS rules are applied to an element.
• If two rules apply to the same element, the one that appears later in the stylesheet will take precedence over the one that appears earlier.
• Cascade refers to the order in which CSS rules are applied to an element.
• If two rules apply to the same element, the one that appears later in the stylesheet will take precedence over the one that appears earlier.
• This allows for more specific rules to override less specific rules.
Note : The cascade works by applying styles from top to bottom in the style sheet.
Note : The cascade works by applying styles from top to bottom in the style sheet.
📣 Wait wait wait...
Want to Master Flexbox and Grid in CSS?
If yes then Learn how to master the power of Flexbox and Grid with this awesome comprehensive ebook, "Master Flexbox and Grid".
By
@Utsav_0
utsavmeena.gumroad.com
Want to Master Flexbox and Grid in CSS?
If yes then Learn how to master the power of Flexbox and Grid with this awesome comprehensive ebook, "Master Flexbox and Grid".
By
@Utsav_0
utsavmeena.gumroad.com
★ Specificity
• Specificity refers to the relative weight of a CSS rule.
• A rule with higher specificity will take precedence over a rule with lower specificity, even if the rule with lower specificity appears later in the stylesheet.
• Specificity refers to the relative weight of a CSS rule.
• A rule with higher specificity will take precedence over a rule with lower specificity, even if the rule with lower specificity appears later in the stylesheet.
★ Example :
Let's say we have the following CSS rules:
Rule 1:
.article {
color: red;
}
Rule 2:
.article p {
color: blue;
}
Rule 3:
p {
color: green;
}
• In this example, the cascade will dictate that Rule 2 takes precedence over Rule 1 because it appears later in the CSS.
Let's say we have the following CSS rules:
Rule 1:
.article {
color: red;
}
Rule 2:
.article p {
color: blue;
}
Rule 3:
p {
color: green;
}
• In this example, the cascade will dictate that Rule 2 takes precedence over Rule 1 because it appears later in the CSS.
• However, specificity dictates that Rule 2 takes precedence over Rule 3 because it is more specific (it targets only paragraphs within .article elements, rather than all paragraphs).
• Therefore, the final color of the paragraphs will be blue.
• Therefore, the final color of the paragraphs will be blue.
End thread 🧵
If this thread helpful for you then :
1. Do Retweet the FIRST TWEET.
2. Follow me and turn on the notifications: @personalvipin
Thank you ❤️
If this thread helpful for you then :
1. Do Retweet the FIRST TWEET.
2. Follow me and turn on the notifications: @personalvipin
Thank you ❤️
جاري تحميل الاقتراحات...