Follow the cascade
Understand how the browser chooses between rules that can style the same element.
- Describe the cascade
- Compare selector specificity
- Use class selectors for reusable styles
Several CSS rules can match one element. The cascade decides which declaration wins by considering importance, selector specificity and source order. A class selector such as .highlight is more specific than a type selector such as p.
1p { color: #334155; }
2.highlight { color: #b42318; }
3
4/* The matching class rule wins over the type rule. */A highlighted paragraph uses the class color
Use classes for reusable patterns and keep selectors as simple as you can. If two rules have equal specificity, the later declaration in the stylesheet wins. Avoid reaching for !important; it makes later changes harder to reason about.
Key takeaways
The cascade resolves competing declarations.
More specific selectors can override less specific ones.
Prefer reusable class selectors and avoid unnecessary !important.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write CSS
Style the sample page, see your changes in the sandboxed preview, and run checks against the computed styles.
Highlight one note
The sample has a paragraph with both the note and featured classes. Make .featured win by setting its color to #b42318.
- Cascade result
Your CSS is applied to a sample page in a sandboxed preview. Tests check computed styles.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…