If two rules have the exact same weight, the in the stylesheet wins. CSS reads from top to bottom.
p.text (green) wins because 11 > 10 > 1.
Now, when you say width: 200px , the element stays 200px. The padding and border are calculated inside that width. This single line of code eliminates half of all CSS layout bugs. CSS Demystified Start writing CSS with confidence
.nav-links display: flex; gap: 2rem; /* Space between links */
This public link is valid for 7 days and shares a thread, including any personal information you added. This link or copies made by others cannot be deleted. If you share with third parties, their policies apply. Can’t copy the link right now. Try again later. If two rules have the exact same weight,
* margin: 0; padding: 0; box-sizing: border-box;
:
CSS is fundamentally about one question: How does this element react to the rules around it?
/* specificity: 0,1,0,0 */ #main .warning color: green; Now, when you say width: 200px , the element stays 200px
Here is the truth: CSS is not broken. It is not magic. And it is certainly not random. CSS is a powerful, sophisticated style sheet language with a consistent logic—it just happens to be , not algorithmic logic.