CSS Explained | The Concepts

In this article, we are going to talk about the core concepts that CSS behaves based on it on the browser. Some of them you will not face in your daily work, but it is beneficial to know about them, and others are so important to know for the sake of helping you solve many CSS styling problems that you might have in your daily work.

CSS stands for Cascading Style Sheets.
CSS is used to style web pages.
CSS describes how HTML elements will be displayed inside a web page.

There are three main concepts in CSS that rule how it applies the most relevant styles to the HTML elements. Let’s start with cascading.

Concept №1: Cascading

Cascading (Cascade) concept controls by which CSS apply the styles from different stylesheet origins based on the origin’s level of precedence.

CSS Origins

• User Agent stylesheet is the browser stylesheet that has the basic styles of the HTML elements based on W3C recommendations.
• User stylesheet is the browser user’s stylesheets used mostly for accessibility purposes for the whole browser and there are some extensions for it like stylus or stylish.
• Author stylesheet is the author of the web app stylesheets included External, internal stylesheets, and inline styles.

As mentioned in Figure 1.2 that the highest level of precedence is the Author and the lowest one is the User-Agent.

Example 1.1 — Cascading Precedence

# User Agent Stylesheet
div { background: grey }

# User Stylesheet
div { background: blue; }

# Author Stylesheet
div { background: orange; }

The resulting background of the div is orange as the Author stylesheet has the highest precedence of all of them.

Precedence with !important

But if !important value enters the race as mentioned in Figure 1.3 the highest level of precedence will change to the User-Agent + !important and the lowest one still the User-Agent.

Moment of Thinking 💭
(User Agent without !important) styles are just default values. But (user agent with !important) styles are final values and it must remain as it is.

Example 1.2 — Cascading with !important

# User Agent Stylesheet
div { background: grey !important }

# Author Stylesheet
div { background: orange !important }

The resulting background of the div is grey as (User-Agent + !important) stylesheet has the highest precedence of all of them.

Example 1.3 — Multiple element styles on the same origin

# Author Stylesheet
div.cls { background: blue }
div { background: orange }

for the following element <div class='cls' /> , which one of the above styles will be applied?

With the cascading algorithm, we cannot decide, so we will move to the second concept to solve this problem. The next concept is Specificity.

Concept №2: Specificity

Specificity is means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

In Example 1.3 we can convert the two styles into two English statements:

• statement #1: For any div that has a class attribute value of cls → apply a blue background.
• statement #2: For any div → apply an orange background.

for the following element <div class='cls' /> , Which statement do you think is more specific for it?

The answer is statement #1 is more specific so the div will have a blue background. and this the whole thing about specificity.

The more specific the style selector is, the more precedence it will have.

Specificity Calculator

As described in Figure 2.1 we can divide specificity weights into 6 categories:

1. Zero weight category: universal selector, combinators, :not.
2. 0.0.0.0.1 weight category (Elements): HTML and Pseudo Elements.
3. 0.0.0.1.0 weight category (Classification): HTML attributes and Pseudo classes selectors.
4. 0.0.1.0.0 weight category (Identification): HTML Id selector.
5. 0.1.0.0.0 weight category: Inline Styles.
6. 1.0.0.0.0 weight category: Styles + !important.

Example 2.1 — Selector Specificity Calculation.

div#my-div > h1.cls                                                    #1

div ➡️ 0.0.0.0.1
#my-div ➡️ 0.0.1.0.0
> ➡️ 0.0.0.0.0
h1 ➡️ 0.0.0.0.1
.cls ➡️ 0.0.0.1.0

So the result is: 0.0.1.1.2

Example 2.2— Equal Specificity.

div.cls1 { background: orange } 
#1div.cls2 { background: blue }                                        #2

Which style will be applied for the following element:
<div class='cls1 cls2' /> ? #1 or #2.

Let’s start from the beginning:

✅ Cascading:
Same-origin so no cascading rules applied here.
let’s move to the next step 👇

✅ Specificity: let’s calculate,
#1 weight is 0.0.0.1.1 and #2 weight is 0.0.0.1.1
So #1 is equal to #2, Specificity is equal.
Let’s move to the next step 👇

✅ Order: #2 (div.cls2) is the winner 🎉 because it is the most recent one.

What if we didn’t apply any value to the element CSS property, what will happen? we will know this in the following concept Inheritance

Concept №3: Inheritance

Inheritance controls what is the default values for the CSS property value when no value explicitly applied to the html element.

There are two types of CSS properties (inherited and non-inherited).

Example 3.1 — Inherited properties

HTML:

<div>
    <p>Hi There</p>
</div>

CSS:

div { color: orange }

Suppose that we apply the above CSS to the above HTML. What is the expected result? Let’s analyze:

Is color property inherited or not?
→ it is inherited. So p element will inherit it from its direct parent div so its text will be orange like its parent.

Example 3.2 —Non-inherited properties

HTML:

<div>
    <p>Hi There</p>
</div>

CSS:

div { border: 1px solid orange }

Suppose that we apply the above CSS to the above HTML. What is the expected result? Let’s analyze:

Is border property inherited or not? it is not inherited. So p element will not inherit it from its direct parent div but it will apply the initial value of it that is recommended by the browser.

Inheritance Diagram

Question for you 🤔 ?
Is backgound-color css property inherited or non-inherited property ?

As we mentioned at the beginning, that some of the concepts you will use in the daily work like Specificity which helps us prioritize some styles over others by applying more specific HTML attribute values, and Inheritance that helps us know how any CSS property gets its value and how to calculate it.
And others will be beneficial for you to know about it like Cascading at least to know from where the CSS gets its name.

Stay tuned for the next article in CSS Explained.