What is specificity in CSS?

Overview

Specificity is used when styling is implemented to the same element by two or more selectors. This decides the styling to be implemented. In specificity, we use points for each styling. The styling implementation with more points wins the styling. Let's look at the illustration to understand how points are counted in CSS:

As we can see in the table above, an element has the least priority point, which is 1. Inline styling has the most priority points, which is 1000.

Therefore, if we use styling on both attributes, the inline styling will be displayed.

Code

Explanation

In the CSS (SCSS) tab:

• Lines 1 and 2: We use red for the <body> tag, which is an element. We also make both Name and Date of birth red.

In the HTML file:

• Lines 4 and 8: We assign a blue color by making inline styling that works within the form tag. This is because it has more priority points than the body tag. This can be seen in the output.