CSS Fundamentals: The Box Model, Specificity, Positioning, and Layout

Accessibility Basics That Affect Real Usage

A few rules that matter beyond visual correctness:

• Use semantic elements (<button>, <nav>, <main>, <label>) instead of styled <div>s where one exists — you get keyboard focus, correct screen-reader roles, and correct default behavior (like a <button> responding to both click and Enter/Space) for free.
• Never remove :focus outlines (outline: none) without replacing them with an equally visible alternative — it's the only way keyboard-only users can see where they are on the page. :focus-visible (rather than :focus) lets you show a focus ring only for keyboard navigation while suppressing it for mouse clicks, which is usually the better default.
• A <label> must be associated with its input (via for/id, or by wrapping the input inside the <label>) — otherwise it's just nearby text, not something a screen reader or a click on the label text connects to the actual input.
• Color alone should never be the only signal for meaning (an error state, a required field) — pair it with an icon, text, or pattern for users with color vision deficiency.
• Respect prefers-reduced-motion for any non-essential animation:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}