Let's read a button that changes color on hover, and see exactly why the base state and hover state are written as two separate rules.
.btn { background: #1E2A5A; color: white; padding: 10px 20px; border: none; border-radius: 6px; } is the button's NORMAL, resting appearance this is what every visitor sees before they interact with it at all.
.btn:hover { background: #3E5AA6; } is a completely separate rule, targeting the SAME class but only during the specific moment a mouse cursor is positioned over it. Notice it only overrides background every other property (padding, border-radius, color) stays exactly as defined in the base .btn rule, since :hover doesn't need to repeat properties that aren't changing.
The moment the mouse leaves the button, this rule stops applying automatically, and the button instantly reverts to its base #1E2A5A background no JavaScript, no manual reset needed; the browser handles the entire transition between these two states by itself.
Notice this could NEVER be written with inline CSS the style attribute can only describe one fixed, permanent state. :hover fundamentally requires a real CSS rule (internal or external) because it needs a selector the browser can watch and react to over time.