# 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