Understanding CSS Cascade, Specificity, and Selectors

Obika Onyinyechi Viola — Mon, 06 May 2024 16:48:10 +0000

Cascading Style Sheets (CSS) plays a vital role when it comes to improving the visual aspect of a website. To have an understanding of CSS, one needs to grasp the following concepts: Cascade, Selector and specificity.

1. Cascade

CSS cascade has to do with determining the final styles that will be applied to an element. This style can be affected by:
The styles applied by the author to the document.

The default style applied by the browser. The styles applied by the users themselves.

Understanding CSS cascade will help a web developer know about what style will affect which and it is a first step to understanding specificity and selector.

2. Selectors

CSS selector are used to select elements you want to style. CSS has are different means of selecting specific element such as:

Element selectors Target all instances of a particular HTML element.

p {
   font-size: 16px;
}

Class selectors: Target elements with a specific class attribute.

.blueText {
   color: blue;
}

ID selectors:Target a single element with a specific ID attribute.

#uniqueID {
   font-weight: bold;
}

Attribute selectors: Targets elements with specific attributes.

input[type="text"] {
   border: 1px solid #ccc;
}

Pseudo-classes and pseudo-elements: Target elements based on their state or position.

a:hover {
   text-decoration: underline;
}

p::first-letter {
   font-size: 150%;
}

3. Specificity

CSS specificity has to deal to what particular style is applied and if there are more than one style targeting a particular element, what style takes precedence. Specificity on CSS has its hierarchy which is used to calculate which style should be applied.

These hierarchy are:

Inline styles

/* Inline style */
<p style="color: red;">This text is red.</p>

ID selector styles

/* ID selector */
#uniqueID {
   color: blue;
}

Classes and pseudo-classes selector styles

/* Class selector */
.blueText {
   color: blue;
}

Element selector

/* Element selector */
p {
   color: green;
}

What this means is that if the inline styles is present, it will be applied. If it is not, the ID selector styles will be applied and if it is not present then the browser will look out if there is a class selector style is applied. And on and on.

Conclusion

Understanding cascade, selector and specificity as a web developer is the key to proficient in the world of CSS. It helps make your code clean, resolve conflict in styles and makes your code maintainable and understandable. To master these concepts is to making your CSS life less a struggle.

Enjoyed what you read and would like to connect? How about we take the conversation on social. You can connect with me on X(formerly Twitter), LinkedIn and Facebook

Likes and comments are highly appreciated 😊

DEV Community: Obika Onyinyechi Viola

Understanding CSS Cascade, Specificity, and Selectors

1. Cascade

2. Selectors

3. Specificity

Conclusion