When writing CSS, there are many times that rules are written that conflict with each other. For example, when styling headers, all of the following rules may apply to an h1 element.

• An element-level rule creating consistent h1 rendering across all pages of the website.
• A class-level rule defining the rendering of h1 elements occurring in specific locations – such as the titles of blog posts.
• An id-level element defining the rendering of an h1 element used in just one place on a one or more web pages – such as the website name.

How can a developer write rules that are general enough to cover every h1 yet specific enough to define styles that should only appear on specific instances of a given element?

CSS styles follow two rules that you need to understand to write effective CSS. Understanding these rules will help you write CSS that is broad when you need it to be, yet highly-specific when you need it to be.

The two rules that govern how CSS behaves are inheritance and specificity.