When two rules disagree, specificity picks the winner.
Direct answer
CSS specificity is a scoring system. Inline styles beat IDs, IDs beat classes, attributes and pseudo-classes, and those beat element selectors. If specificity is equal, the later rule wins. Keep selectors low in specificity and avoid !important.
The scoring
| Selector type | Weight |
|---|---|
| Inline style | highest |
ID (#nav) | high |
| Class, attribute, pseudo-class | medium |
Element (p) | low |
Example
p { color: black; } /* low */
.note { color: blue; } /* medium, wins over p */
#intro { color: green; } /* high, wins over .note */
Debugging
- Open DevTools and inspect the element.
- Look at the Styles panel. Crossed-out rules lost.
- Check which selector is more specific, or which comes later.
Tips
- Use classes for most styling.
- Avoid chains like
div.container ul li a. - Reorder rules or reduce specificity instead of adding
!important.
Where Teyro fits
Teyro's HTML & CSS for Beginners course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Understand the order and your CSS stops feeling random.
