Cascade ਅਤੇ inheritance ਕਿਵੇਂ ਫੈਸਲਾ ਕਰਦੇ ਹਨ ਕਿ ਕਿਹੜੇ styles ਲਾਗੂ ਹੋਣ?

Question

Accepted Answer

ਜਦੋਂ ਕਿਸੇ element ਨੂੰ style ਕਰ ਸਕਣ ਵਾਲੇ ਕਈ rules ਹੁੰਦੇ ਹਨ, ਦੋ mechanisms ਨਤੀਜਾ ਫੈਸਲਾ ਕਰਦੇ ਹਨ: **cascade** (ਕਿਹੜਾ rule ਜਿੱਤਦਾ ਹੈ) ਅਤੇ **inheritance** (ਕਿਹੜੀਆਂ properties ਮਾਤਾ-ਪਿਤਾ ਤੋਂ ਬੱਚਿਆਂ ਤੱਕ ਜਾਂਦੀਆਂ ਹਨ)।

## Cascade — conflicts ਨੂੰ ਹੱਲ ਕਰਨਾ, ਕ੍ਰਮ ਵਿਚ

Browser ਜਿੱਤਣ ਵਾਲੀ declaration ਚੁਣਦਾ ਹੈ, ਤਰਜੀਹ ਦੇ ਕ੍ਰਮ ਵਿਚ ਜਾਂਚ ਕਰਕੇ:

```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) */
```

## Inheritance — ਕੁਝ properties ਬੱਚਿਆਂ ਤੱਕ ਜਾਂਦੀਆਂ ਹਨ

ਕੁਝ properties (ਜ਼ਿਆਦਾਤਰ **text-related**) descendants ਦੁਆਰਾ ਆਪੇ ਆਪ inherit ਹੋ ਜਾਂਦੀਆਂ ਹਨ; ਜ਼ਿਆਦਾ ਨਹੀਂ ਹੁੰਦੀਆਂ।

```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 */
}
```

**Default ਵਿਚ Inherited**: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`। **Inherited ਨਹੀਂ**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`।

## Inheritance ਨੂੰ explicitly ਨਿਯੰਤਰਿਤ ਕਰਨਾ

```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 */
}
```

## Cascade ਦੇ ਅੰਦਰ Specificity recap

ਇਹ ਕਾਰਨ ਹੈ ਕਿ ਇੱਕ low-specificity rule ਵੀ ਹਾਰ ਸਕਦਾ ਹੈ ਭਾਵੇਂ ਉਹ ਬਾਅਦ ਵਿਚ ਲਿਖਿਆ ਗਿਆ ਹੋਵੇ — specificity source order ਤੋਂ ਪਹਿਲਾਂ ਜਾਂਚੀ ਜਾਂਦੀ ਹੈ। ਆਰਡਰ ਨੂੰ ਸਮਝਣਾ (importance → specificity → source order) ਲਗਭਗ ਹਰੇਕ "ਮੇਰਾ style apply ਨਹੀਂ ਹੋ ਰਿਹਾ" ਕੇਸ ਨੂੰ ਸਮਝਾਉਂਦਾ ਹੈ।

## ਕਿਉਂ ਇਹ ਮਾਪਣੀ ਹੈ

Cascade ਅਤੇ inheritance *ਕਿਵੇਂ CSS ਅਸਲ ਵਿਚ ਹੱਲ ਹੁੰਦਾ ਹੈ* ਦਾ ਮੂਲ ਮਾডਲ ਹੈ।

Tariff order ਨੂੰ ਜਾਣਨਾ conflicts ਨੂੰ debug ਕਰਦਾ ਹੈ, ਇਹ ਜਾਣਨਾ ਕਿ ਕਿਹੜੀਆਂ properties inherit ਹੁੰਦੀਆਂ ਹਨ ਤਾਂ `color`/`font` ਨੂੰ ਇੱਕ ਵਾਰ `body` ਉੱਤੇ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ ਹਰ ਥਾਂ ਉੱਤੇ ਨਹੀਂ, ਅਤੇ `inherit`/`initial`/`unset` ਤੁਹਾਨੂੰ ਸਟੀਕ ਨਿਯੰਤਰਣ ਦਿੰਦੇ ਹਨ — ਮਿਲ ਕੇ ਇਹ CSS ਨੂੰ ਜਾਦੂ ਦੀ ਬਜਾਏ predictable ਬਣਾਉਂਦੇ ਹਨ।