The CSS Cascade

CSS stands for cascading style sheet, it is used for styling HTML contents in a webpage in terms of color for the background, text, adding padding, margin, alignment of items, positioning, etc. It’s usually embedded in the head section of a webpage using a link tag <link> when used externally.

CSS is useful in ensuring better and enhanced user experience on the webpage to ensure ceaseless transitioning and navigation around the webpage. For instance, the proper use of color on a webpage communicates some messages on its own, a button with the color red or a popup message with the color red draws the attention of the user to be more sensitive with their activities on the webpage, as a result of danger attached to the color red generally.

To understand how CSS works, it is important to understand the CSS Cascade.

The CSS Cascade

The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element. The cascade is inherent to working with CSS, it is what gives “Cascading Style Sheets(CSS)” their cascading nature. The cascade is a powerful tool, but using it wrong can lead to brittle stylesheets when there need to be changes. The cascade takes an unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence, and outputs a single cascaded value.

The cascade algorithm is split into 4 distinct stages:

1. Position and order of appearance

2. Selector Specificity

3. Origin

4. Importance

1. Position and order of importance

This has to do with the order in which the defined CSS rules appear. The order in which the CSS rules appear and how they appear is taken into consideration by the cascade while it calculates conflict resolution.

Styles can come from various sources on an HTML page, such as a <link> tag, an embedded <style> tag, and inline CSS as defined in an element's style attribute.

For example, if you have a <link> that includes CSS at the top of your HTML page, then another <link> that includes CSS at the bottom of your page: the bottom <link> will have the most specificity. The same thing happens with embedded <style> elements, too. They get more specific, the further down the page they are.

This ordering also applies to embedded <style> elements. If they are declared before a <link>, the linked stylesheet's CSS will have the most specificity.

An inline style attribute with CSS declared in it will override all other CSS, regardless of its position, unless a declaration has !important defined.

The position also applies in the order of your CSS rule. In this example, the element will have a red background because background: red was declared last. Because the green background was declared before the red background, it is now ignored by the browser.

.my-element {
background: green;
background: red;
}

2. Selector Specificity

Selector Specificity is an algorithm that determines which CSS selector is the most specific, using a weighting or scoring system to make those permutations. By making a rule more specific, you can cause it to be applied even if some other CSS that matches the selector appears later in the CSS.

If you have 2 CSS declarations with the same number of high-priority selectors, the resolution algorithm will consider the number of selectors at the next level of specificity. For example, if both of these CSS rules were targeting the same element, the color would be red. This is because they both have 1 id selector, but the second rule has 2 class selectors.

3. Origin

The highest weighted attribute that the cascade checks is the origin of a given rule. The origin of a CSS rule can come from three places:

1. Author: These are the default styles provided for the element by the browser. This is why inputs can look slightly different on different browsers, and it’s also one of the reasons that people like to use CSS resets, to make sure that user-agent styles are overridden.
2. User: These are defined and controlled by the user of the browser. Not everyone will have one, but when people do add one, it’s usually for overriding styles & adding accessibility to websites.

3. User-Agent: These are the default styles provided for the element by the browser. This is why inputs can look slightly different on different browsers, and it’s also one of the reasons that people like to use CSS resets, to make sure that user-agent styles are overridden.

4. Importance

Not all CSS rules are calculated the same as each other, or given the same specificity as each other.

The order of importance, from least important, to most important is as follows:

1. normal rule type, such as font-size, background , or color

2. animation rule type

3. !important rule type (following the same order as origin)

4. transition rule type

Active animation and transition rule types have higher importance than normal rules. In the case of transitions higher importance than !important rule types. This is because when an animation or transition becomes active, its expected behavior is to change the visual state.

In conclusion, Since the CSS cascade is one of the more misunderstood parts of CSS (and often assumed as the source of a lot of bugs), knowing how it works will give you a huge edge in keeping stylesheets maintainable.

Thank you for reading.