INTRODUCTION TO CSS CASCADE, SELECTOR AND SPECIFICITY- A BEGINNER GUIDE 101

INTRODUCTION

CSS which stands for Cascading Style Sheet helps brings beauty and your creativity to “life on your website through styling. Its helps defines the style(s) used to design your website. Generally CSS is a language used to style your website. But what is CASCADE in CSS

CASCADE STYLESHEET:

Cascade defines the origin and layer that takes precedence when declarations in more than one origin or scope block set a value for a property on an element. That means when a selector matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater specificity. The CSS cascade aim is to select CSS declarations in order to determine the correct values for CSS properties.

There are five steps in the cascade algorithm, in order of :

1. Relevance
2. Origin and importance
3. Specificity
4. Scoping proximity
5. Order of appearance Lets use an example to explain better- When two rules from the same cascade layer or origin apply and both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. Let say this is HTML

This is my first paragraph

This is my first paragraph

P{

Color: red;

}

P{

Color: blue;

}

Looking at the example above you will notice that both are at the same level or have same specificity hence the last styling will take precedence

SPECIFICTY

Specificity is the algorithm that the browser uses to decide which property value is applied to an element. If multiple style blocks have different selectors that configure the same property with different values and target the same element, specificity decides the property value that gets applied to the element. Specificity is basically a measure of how specific a selector's selection will be:

• An element selector is less specific; it will select all elements of that type that appear on a page, so it has less weight. Pseudo-element selectors have the same specificity as regular element selectors.
• A class selector is more specific; it will select only the elements on a page that have a specific class attribute value, so it has more weight. Attribute selectors and pseudo-classes have the same weight as a class.

CSS SELECTOR AND ITS SPECIFICITY

CSS selector is used to target the HTML elements on our web pages that we want to style. There are a wide variety of CS
SELECTOR SPECIFICTY

• 0 Element 1 Class 10 Attribute 10 ID 100 In-line style 1000 !important 10000

CONCLUSION

The cascade, specificity, and CSS selector control how CSS is applied to HTML and how conflicts between style declarations are resolved.