Thread by @afkashish

Confused about why your CSS property is not being applied?

CSS might be confusing.

😕 😕 😕

Let's make it easy by understanding CSS Cascade and inheritance in this CSS Mega Thread. 🧵

😃 😃 😃

👉 Conflicting rules: We need to understand how cascading works in CSS. There might be times that your CSS rule is not being applied. It's mostly because you might have created two rules for the same element.

Example:

👉 The cascade, and the closely-related concept of specificity, are mechanisms that control which rule applies when there is such a conflict.

👉 Specificity: This is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element.

👉 An element selector is less specific as its selects all the elements and so will get a lower specificity.

A class selector is more specific as it selects only the elements on a page that have a specific class attribute value — so will get a higher score

👉 Inheritance: Inheritance generally means that some properties of the parent are also applied to the child element.

Properties like Font-Family & color etc. are examples of this.

👉 How to control inheritance?

CSS Provides 4 Properties that can be used to control inheritance. These are universal and every CSS property accepts these values.

➡ inherit
➡ initial
➡ unset
➡ revert

👉 inherit: It sets the property applied to the parent to a selected element.

In the example below the <h1> has color property inherited from the parent div.

👉 initial: Sets the value of a selected element to its initial value i.e default value.

In the example below the <em> tag has the property initial and its defaults to black in color.

👉 unset: Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like the initial.

👉 revert: Similar to unset most of the time, however, will revert the property to the browser's default styling rather than the defaults applied to that property.

👉 Understanding Cascade and Specificity:

Three factors to consider, are listed here in increasing order of importance.

➡ Source order
➡ Specificity
➡ Importance

👉 Source order: As we already saw above If you have more than one rule, which has exactly the same weight, then the one that comes last in the CSS will win.

Example:

👉 Specificity: As we know by the source order the property which comes later will be applied but in some cases, we do see the first is applied it is because the first one has higher specificity.

The example shows how class selector has more specificity than element selector.

👉 Importance: is denoted by !important. a special piece of CSS that you can use to overrule all of the above calculations.

Used to make a particular property and value the most specific thing, thus overriding the normal rules of the cascade.

Example:

TLDR;
CSS properties depend on cascading which means the property which comes last will be applied until it has been overruled by higher specificity. Some properties are inherited from parent to child which can be altered with properties.
And !important overrides rule of cascade

Hey Everyone 👋 I am Ashish.

I make your web development journey easy.
I share daily content on Web development tips, threads, and dev tools.

If you find this helpful then.
❤️ Like it
🔁 Retweet the first tweet.
👉 Follow me

Thank you, friends. Keep Learning.