Suggest an edit

Improve this article

Refine the answer for “In what order are CSS rules applied?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

CSS rules are applied in a strictly defined order, and the browser picks the final style based on three levels of priority, from top to bottom:

---

### **1) Style source (the largest priority level)**

From strongest to weakest:

1. `!important` (manually boosted priority)
2. **inline styles** (the `style=""` attribute)
3. **external and internal styles** (`.css` files and `<style>`)
4. **default browser styles**

---

### **2) Specificity (selector precision)**

If rules belong to the same source, the selector is examined. From more precise to less precise:

1. **ID**: `#header`
2. **Classes, attributes, pseudo-classes**: `.item`, `[type="text"]`, `:hover`
3. **Tags and pseudo-elements**: `p`, `h1`, `::after`

---

### **3) Order in the code (the last word goes to the lower selector)**

If the source and specificity are the same, the rule that is **written later** wins:

```css
p { color: blue; }
p { color: black; } /* this one will apply */
```

---

### **The final cascade formula**

The browser decides like this:

**importance → specificity → order in the code**

That is, sources are compared first, then selector precision, and only if they are equal is the last rule in order taken.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts192 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.