Cascade and inheritance in CSS

This article is for some of you who are beginner and intermediate in programming and want to know more about cascade and inheritance in CSS

1. Cascade

The short form of CSS is from Cascading Style Sheets and that first word is very important and needs to be understand.

Cascade means that the order of the properties matter. Let’s make an example:

h1 {
    color: black;
}
h1 {
    color: red;
}

The color of h1 will be red because it will overwrite the first property(color: black).

2. Specificity

Specificity means how browser knows which style has to apply to an element if there are multiple selectors.

The id selector is more specific that the class selector. And the class selector is more specific than the element selector. And the element selector is more specific than the all(*) selector.

Let’s try with some examples:

#myP {
   color: black;
}
p {
   color: red;
}

The paragraph will have the color black, because the id selector is more specific.

2.

.classP {
    color: green;
}
p {
    color: red;
}

The paragraph will have the color green, because the class selector is more specific.