In CSS, a rule consists of a selector and a declaration block. The selector is used to select one or more HTML elements that we want to style, and the declaration block contains the actual styles to apply to those elements. Each declaration in the block consists of a CSS property and its corresponding value, called the declared value.
CSS can come from different sources, including:
Author declarations: CSS that developers write in their stylesheets.
User declarations: CSS coming from the user, such as when they change the default font size in the browser.
User agent declarations: default browser declarations, such as the blue text and underlined style of unstyled anchor tags.
When multiple rules apply to an element, conflicts can arise. The CSS parsing phase involves resolving these conflicts by combining different stylesheets and declarations, and determining which declaration takes precedence.
The cascade is the process of resolving conflicts between different CSS rules and declarations. It combines the CSS declarations coming from all sources and gives them different levels of importance based on their source:
User declarations marked with the !important keyword have the highest importance.
Author declarations marked with !important have the second highest importance.
Normal author declarations have medium importance.
Normal user declarations have lower importance.
User agent declarations have the lowest importance.
For example, consider the following two rules that apply to a button:
cssCopy code.button {
background-color: green;
}
.button {
background-color: blue !important;
}
Both rules apply to the .button class and have conflicting declarations for the background color property. However, the second rule contains the important keyword, giving it higher importance, so the button will be blue.
When there are conflicting declarations without the important keyword, the cascade calculates and compares their selector specificity. Inline styles have the highest specificity, followed by IDs, classes, pseudo-classes and attribute selectors, and finally element and pseudo-element selectors.
For example, consider the following declarations:
cssCopy codebutton {
background-color: green;
}
#special-button {
background-color: yellow;
}
.button {
background-color: purple;
}
button:hover {
background-color: blue;
}
These declarations all have the same importance, so the cascade calculates their selector specificity to determine which declaration takes precedence. The selector specificity is a score for each of the four categories:
Inline styles
IDs
Classes, pseudo-classes, and attribute selectors
Elements and pseudo-elements
For each category, the score is the number of occurrences in the selector. In the above example, the selector specificities are:
cssCopy codebutton { specificity: 0, 0, 0, 1; }
#special-button { specificity: 0, 1, 0, 0; }
.button { specificity: 0, 0, 1, 0; }
button:hover { specificity: 0, 0, 1, 1; }
Since #special-button has the highest specificity, its declaration for background-color takes precedence, and the button will be yellow.
In summary, the CSS cascade is the process of resolving conflicts between CSS declarations by combining stylesheets and determining the importance of each declaration based on its source, and its selector specificity when there are conflicting declarations without the important keyword. Understanding the cascade is essential for writing maintainable and predictable CSS styles.
To know more about CSS :- https://amzn.to/43VHzll
