CSS stands for Cascading Style Sheets, in which "Cascading" means "Cascading".

For example, write 2 css code as follows:

So how should the browser understand the above code? That's because of the "Cascading" mechanism in CSS.

In other words, if there is no "Cascading" then CSS will mean "Conflicting Style Sheets" =)))

And to apply Cascading, CSS must follow these 3 steps, let's find out!

1, Importance

This is the first step to determine which CSS "rules" will apply.

Importance will be based on the "origin" of Style Sheets to determine whether it is applied.

Let's look at the following picture:

There are 3 origins of Style Sheets that CSS rules, ranked in order of increasing priority (1 is the least priority, 3 is the highest priority):

1. User Agent Styles: These are the default CSS that browsers preset, if your HTML file is not styled with CSS, it will still have some default styles (such as h1 will be big and bold,. ..)
2. User Styles: Some users will have custom styles installed for them personally, these styles only apply to the user itself and it is installed locally.
3. Author Styles: This is the CSS written by us – developers and sent through servers to the client.

So considering the level of Importace, CSS, the server sent to the client is always the highest priority, so it will not be overwritten by the default browser or custom client.

2, Specificity

Specificity là một vấn lý chung Why bạn CSS-Rules không thể sử dụng để số một phần, mặc định bạn think chúng cần.

Temporal translation: Specificity is a common reason for CSS rules not being applied to certain elements, although you think they apply.

In CSS there is a CSS selector concept, this concept is closely related to "Specificity". Because CSS will decentralize these selectors, viewing any "specific" selector will apply that selector.

Take a look at the following example and find out what color h1 card will be converted:

Answer: orange

The "Specific" levels of CSS are classified as follows:

1. Inline styles – In the above example, I did not mention it because it is quite unique, but by writing CSS rules directly in HTML through style properties, CSS there is always the highest priority.
2. IDs – ID is used as a unique identifier for a component in the page. You are not allowed to use 1 ID for many different elements in the page. It is unique , only targeted to that element so its priority is just behind Inline styles
3. Classes, attributes and pseudo-classes – Selector of this type often refer to custom and group identifiers that users set. The "specific" than the element name selector should be preferred.
4. Elements and pseudo-elements – This is the "generic" type selector, so it has the lowest priority.

So through the levels as I mentioned above, you understand why the answer is orange ?

3, Source Order

We consider the following 2 examples:

Example 1:

And at the beginning of the article:

Referring to Source order, do you guess which CSS rule has been applied in every VD?

In the example 1 it is color: grey and in the example then it is color: blue .

Yes, if the CSS rules have the same Importance and Specificity, then we will consider its appearance order. Which CSS rules are written later will be prioritized over the previously written CSS.

This is also the reason why we often put style tags like this:

In HTML, any CSS files added later will have a higher priority and be applied. So always depending on which CSS file you want to prioritize and arrange it in the HTML file properly!

Reference source:

https://www.w3schools.com/css/css_specificity.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade