Specifity

Specifity-Rules

Rule1: From top to bottom

styles that appear later in the style sheet overwrite the ones that appeared earlier

Rule 2: IDs over Classes over Tags over Universal

Rule 3: Inline CSS over Internal CSS over External CSS

Rule 4: !important trumps everything (To be used wisely and only in exceptional cases!!)

.highlighted {
  background-color: yellow !important;
}

composit selector usually has higher specificity

• Specifity - MDN (opens new window)
• Specifity - CSS Tricks (opens new window)
• Calculating a selector's specificity - w3.org (opens new window)
• Codecademy Forum - specificity (opens new window)
• Hacks for dealing with specificity - csswizardry.com (opens new window)

---

Cascading & Inheritance

• All Elements only care about the parent & siblings

• margin and body are not cascaded to the children. color is cascaded

• links don't inherit the color of the parent

• Cascade and Inheritance - MDN (opens new window)

• The “C” in CSS: The Cascade - CSS Tricks (opens new window)

---