Specificity is what determines what CSS rules are applied in the browser. The rule with a higher specificity may override other rules if its specificity is higher than the others. ID selectors have the highest base specificity with a base specificity of 100, or 1,0,0. Then class selectors with a base of 10, or 0,1,0. Then last is element selectors with a base of 1, or 0,0,1. These types of selectors can be combined to give a rule higher specificity.
When two rules have the same specificity, the latest rule will be the one that shows up. The last defining rule will overwrite any previous, conflicting rules. An embedded style rule will have higher specificity than an external style rule. A definite way to override specificity is to give an element the !important rule, however that should never be done under almost any circumstance and is considered very bad practice.
Precedence refers to the order and rank in which priority of rules are given. The element with the most precedence will override other rules that have lower precedence. For instance, elements that inherit properties will be given lower precedence than normal elements.
There are 4 main rules of precedence.
Inheritance refers to when there is a parent element and it ends up giving some of the same CSS properties to it's child elements, they inherit the traits. For example if you set a font type and text color for the body tag, the rest of the elements inside of the body tag will also have that same font and color unless you make a new rule to change a specific element inside that tag. When an element inherits a specified value from its parent, it inherits its computed value.
Properties are the traits you wish to change with a CSS rule, such as text-align or border-style.
Values are what you are going to change about the property, for instance if you are changing the text color the value would property would be color and the value would be a color, for example blue.
Selecors are the elements or classes you are going to change in CSS, such as changing the < body > tag or a #id tag