Specificity

Specificity is calculated by assigning a heavier weight to those selectors that are more specific in nature.

Tag-name or type selectors are not very specific. A website could have hundreds of <p> tags embedded in it making it difficult to target selected groups of them.
The class attribute increases specificity by targeting subsets of elements that have common styling rules beyond the element selector.
The id attribute of an element should be unique within a website making it very specific giving it the highest priority.
Finally, if an element has inline styling <p style=“color: brown”> it automatically overrides all others.

Where specificity is determined to be equal between two competing declaration, the last declaration wins.

To calculate specificity, we count the occurrences of each selector and order them from highest to lowest using the following formula:

inline-style id class tag-name

/* Specificity of 0001 */
p {
    color: red;
}

/* Specificity of 0002 */
div>p {
    color: burlywood;
}

/* Specificity of 0010 */
.yellow {
    color: yellow;
}

/* Specificity of 0100 */
#green {
    color: green;
}

/* Specificity of 0100 */
#blue {
    color: blue;
}

/* Specificity of 0100 */
#purple {
    color: purple;
}

/* Specificity of 0012 */
div>p.yellow {
    color: rgb(80, 80, 14);
}