Cascade and box model

Several rules may match one element. The browser resolves conflicts using the cascade: importance/origin, specificity, and then source order. Inheritance passes some properties from parents to children.

p { color: green; }
.note { color: navy; }
#warning { color: crimson; }

An element with id="warning" and class="note" is crimson because the ID selector is more specific. If specificity is equal, the later rule wins. Keep selectors simple so this remains understandable.

Box model

Every element has a content box, padding, border, and margin:

.card {
  box-sizing: border-box;
  width: 20rem;
  padding: 1rem;
  border: 2px solid steelblue;
  margin: 1rem 0;
}

With border-box, the declared width includes content, padding, and border. Without it, padding and border are added outside the declared width. Inspect the box model panel in DevTools while experimenting with the example above on your own page.