CSS stands for Cascading Style Sheets. It used to render the html , and it is closely-related concept of specificity are mechanisms that control which rule applies when there is such a conflict.
Sometime, you will find the CSS what you write is not working well. So we need to understand its working mechanisms.
Stylesheets cascade — at a very simple level, this means that the origin, the cascade layer, and the order of CSS rules matter. When two rules from the same cascade layer apply and both have equal specificity, the one that is defined last in the stylesheet is the one that will be used.
Specificity is the algorithm that the browser uses to decide which property value is applied to an element.
An element selector is less specific; it will select all elements of that type that appear on a page, so it has less weight.
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.
There are three factors to consider, listed here in increasing order of importance. Later ones overrule earlier ones:
Source order,Specificity,Importance
We will look at these to see how browsers figure out exactly what CSS should be applied.