CSS Explained: How Websites Get Their Look

Introduction

Earlier posts covered Flexbox and Grid — the layout systems. This one covers CSS itself: the language that turns plain HTML structure into a designed page. If HTML is the skeleton, CSS is the clothing, the posture, and the paint.

Selectors: choosing what to style

CSS rules have two parts: a selector that picks elements, and declarations that style them.

/* Element selector: every paragraph */
p {
  color: #0f172a;
  font-size: 17px;
}
/* Class selector: elements marked class="card" */
.card {
  background: white;
  padding: 16px;
  border-radius: 8px;
}
/* ID selector: the one element with id="hero" */
#hero {
  background: #1e1b4b;
  color: white;
}

Classes are the workhorse: reusable, combinable, and specific enough without being rigid. IDs should be rare — one per page, for unique landmarks — because they are hard to override later.

The box model: everything is a box

Every element on a page is a rectangle made of four layers, outside in: margin (space outside), border, padding (space inside), and the content itself.

.card {
  width: 300px;
  padding: 20px;      /* Inside space */
  border: 2px solid #14b8a6;
  margin: 16px;       /* Outside space */
}

The classic beginner surprise: by default, width covers only the content, so padding and border make the box bigger than 300px. The standard fix, used on nearly every modern site, is:

* {
  box-sizing: border-box;
}

With border-box, width includes padding and border — the box is exactly the size you asked for. If you remember one CSS rule, make it this one.

The cascade: why some styles win

When two rules target the same element, CSS resolves the conflict by specificity: IDs beat classes, classes beat element selectors, and later rules beat earlier ones of equal weight. That ordering — the "cascade" in Cascading Style Sheets — is why a .card rule can override a general p rule, and why !important (which overrides everything) is a last resort that usually creates more problems than it solves.

Takeaway

Selectors pick, the box model sizes, and the cascade resolves conflicts. Understand those three, and Flexbox and Grid stop feeling like magic — they are just layout tools inside a system you already understand.

Originally published at https://practicaldevblog.blogspot.com/2026/10/css-explained-how-websites-get-their.html