Conflict of Interests

The name Cascading means styles layer on top of each other. If two rules speak about the same element, the browser runs a conflict resolution algorithm.

1. Order of Appearance

If rules have the same " weight, " the one written below wins.

p { color: blue; }
p { color: red; } /* Paragraph will be red */

2. Specificity

This is the " weight " of a selector. The more precise the selector, the stronger it is.

• Tag (p) = 1 point.
• Class (.item) = 10 points.
• ID (#header) = 100 points.
• Inline style = 1000 points.

3. Inheritance

Some styles " flow " from top to bottom from parent to children.

• Inherited: color, font-family, line-height, text-align.
• NOT inherited: margin, padding, border, width, height.

4. Nuclear Button: !important

You can force priority by adding !important to the value.

p { color: green !important; }

Use this only in extreme cases! Abusing !important makes CSS fragile and unreadable.