Kif il-kaskadir u l-wirt jiddeċiidu liema stili jiġu applikati?

Question

Accepted Answer

Meta ħafna regoli jistgħu jistilizzaw element, żewġ mekkaniżmi jiddeċidu r-riżultat: il-**kaskadir** (liema regola tirbaħ) u l-**wirt** (liema proprjetajiet jiddexxendu minn ġenituri).

## Il-kaskadir — isolvi l-konflitti, b'ordni ta' prijorità

Il-brawżer jagħżel id-dikjarazjoni li tirbaħ billi jivverifika, b'ordni ta' prijorità:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## Il-wirt — xi proprjetajiet jiddexxendu lill-bniet

Ċerti proprjetajiet (l-aktar **relatati mat-test**) jiġu wirtuwa awtomatikament mill-iddisċendenti; l-aktar ma huma.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**Wirtuwa** b'mod default: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Mhux wirtuwa**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Ikkonttrolla l-wirt b'mod esplisitu

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Ringrab tal-ispesifitá fil-kaskadir

Dan hu għaliex regola ta' speċifitá baxxa tista' tittieħed anke jekk tinkiteb aktar tard — il-speċifitá tiġi ċċekkjata *qabel* l-ordni tal-sors. L-għarfien tal-ordni (importanza → speċifitá → ordni tal-sors) jispjega kważi kull każ ta' "l-istil tiegħi ma taħdimx".

## Għaliex dan huwa importanti

Il-kaskadir u l-wirt huma l-mudell essenzjali ta' *kif CSS tivverifika fil-fatt*.

L-għarfien tal-ordni ta' prijorità jiddebugga l-konflitti, l-għarfien liema proprjetajiet jiġu wirtuwa jippermettilika tistabbilixxi `color`/`font` darba fuq `body` minflok kullimkien, u `inherit`/`initial`/`unset` jagħtuk kontroll preċiż — flimkien jagħmluha CSS prevedibli minflok maġija.