This example introduces the Cascade aspect of Cascading Style Sheets (CSS).
The basic principle is this:
When two or more CSS selectors select the same HTML element,
the most specific selector has the highest priority.
This means a higher priority style property will override a lower priority one.
For example, a background-color from a more specific selector (higher-priority)
will override a background-color from a less specific selector (lower-priority).
The official terminology is that a more specific selector has higher specificity than a less specific one.
See the source code for more information and how the blocks below get their colors.
The Element Selector and Generic Class Selector (more specific) both select this block.
The Element Selector, the Generic Class Selector (more specific), and the paragraph-specific
Class Selector (even more specific) all select this block.
Styles applied as the value of the HTML style attribute (inline-styles) are the most specific (highest specificity).
Inline Styles will override styles applied by ANY Selector. This is the lowest level of cascade.