CSS building blocks

Cascading Style Sheet, known as CSS, is used to style an HTML document. To add more definition and colour to the existing document.

Cascade,specificity, and inheritance are the base of what CSS entails. Once understood, it will be easier to understand how the CSS rules apply.

Cascade

Cascade simply means how the elements are laid out from the origin and the order in which the CSS rules apply. When an element has two rules of the same specificity, the one that is defined last in the stylesheet is the one that will be used/seen.

Specificity.

It is a measure the browser uses to decide which property value is applied to an element. The more specific it is, the higher the specificity. For example, the class selector is more specific (it will select only the elements with that particular class attribute) than the element selector (it will select all elements of that type).

Inheritance

Some CSS property values are inherited by the child elements, while some aren't. For example, if you set a colour on an element, every element inside it will be of the same colour, but if you set the width of that same element, the elements inside do not inherit it.

These three together control which CSS applies to what element.