~//tutorials/en/css/css-fundamentals/edit

~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

en/tutorials/css/2css-fundamentals

# CSS Fundamentals

CSS (Cascading Style Sheets) controls how HTML looks: colors, spacing, layout, fonts. The word *cascading* means rules combine and conflict resolution follows specific priorities.

## Selectors

Selectors target elements to style them:

```css
h1 {
  color: #00ff41;
}

.card {
  background: #111;
}

#hero {
  padding: 2rem;
}
```

- `h1` — element selector
- `.card` — class selector
- `#hero` — id selector

## The cascade

When rules conflict, specificity and source order decide the winner. A rule with a higher specificity wins; ties go to the one declared last.

## The box model

Every element is a box made of four layers:

```
┌──────────────────────────┐
│        margin            │
│  ┌────────────────────┐  │
│  │      border        │  │
│  │  ┌──────────────┐  │  │
│  │  │   padding    │  │  │
│  │  │  ┌────────┐  │  │  │
│  │  │  │content │  │  │  │
│  │  │  └────────┘  │  │  │
│  │  └──────────────┘  │  │
│  └────────────────────┘  │
└──────────────────────────┘
```

From the inside out: **content → padding → border → margin**.

cancel