The C in CSS Means Cascading

There are a number of reasons why "C" is the first letter in CSS. The Cascading is an integral part of how CSS works in the browser.

Three things decide which styles get applied
1. Importance: normal (any style) or !important ( color:red !important;)
2. Specificity: see below
3. Source order: see below

Specificity
0. !important
1. ids
2. Classes, pseudo-classes, attribute selectors
3. Type selectors (elements and ::pseudo-elements)

Look at the element that is being styled. Add the total number of each category in the selector expression. Treat this like a software version number.
0.4.2 = .red .big p.one.two span { }
1.1.1 = #simon p.first { }
The second version is more important and gets applied second (if these were pointing at the same element)

Source Order
CSS declarations come from different origins:
the user-agent (browser) style sheet;
the author style sheet;
and the user style sheet.

Within the author style sheet origin we also have:
external stylesheet;
embedded style element;
inline style attribute.

Specificity is used to break ties.

Code GIST: https://gist.github.com/prof3ssorSt3v...