Chapter 2 of 6
2.1 The CSS Cascade & Specificity Hierarchy
CSS stands for Cascading Style Sheets. Specificity determines which style rule takes precedence when multiple rules target the same element.
CSS Specificity Weight Hierarchy
1. Inline Styles
Weight: (1, 0, 0, 0) — style="color: red"
2. IDs
Weight: (0, 1, 0, 0) — #header
3. Classes, Attributes & Pseudo-classes
Weight: (0, 0, 1, 0) — .btn, [type="text"], :hover, :has()
4. Elements & Pseudo-elements
Weight: (0, 0, 0, 1) — h1, div, ::before
Modern CSS Selectors (:has and :is)css
/* Target cards that CONTAIN an image using parent selector :has() */
.card:has(img) {
grid-template-columns: 1fr 2fr;
}
/* Reduce specificity overhead with :is() */
:is(header, footer, nav) a {
color: var(--primary);
}2.2 The CSS Box Model
Universal Box-Sizing Resetcss
*, *::before, *::after {
box-sizing: border-box; /* Width includes padding and border */
margin: 0;
padding: 0;
}