7. Intermediate CSS

BootCamp by Dr.Angela

1. The Cascade - Specificity and Inheritance

• External → Internal → Inline
• Position(when multiple classes are applied, the last one on the right takes precedence) → Specificity(element → class → attribute → id) → Type(External → Internal → Inline) → Importance(ex. Color; red !important;)

2. Combining CSS selectors

• Group : selector, selector { }
• Child : selector(parent) > selector(direct child) { }
  • ex) .box > p { }
• Descendant(not direct) : selector selector { }
• Chaining(specific, element → class/ID) : selectorselector
  • ex) h1#title.big.heading
• Combining combiners : selector selectorselector

3. CSS Positioning

• STATIC : default
• RELATIVE
• ABSOLUTE : nearest ancestor or has relative position attribute or top left corner of web page
• FIXED : top left corner of browser window (stays in the same place even when scrolling)
• Z-index : stacking order (which element appears in front or behind others)