CSS Precedence of styles
Notes:
CSS - Precedence of styles
The type of style being considered more important than other is known as precedence of style.
The order in which styles are placed determines which style rule takes the highest precedence.
The better understanding of precedence of styles will help us to create more organized and manageable code.
Important Note: nearest or closest style rule to the tag / element wins.
Order of precedence:
1. Inline styles
2. Internal (Embedded) styles
3. External styles.
4. Browser default styles.
Browser default styles:
Every browser has its own default style rules, those style rules get apply when no styles are defined for a page.
External Styles:
are styles that are placed in an external sheet (i.e. CSS file).
External styles are used to override browser default styles.
If more than one CSS files linked then the order in which they placed are considered.
Internal Styles:
are styles that are placed within header tag.
Internal styles are used to override external and browser default styles.
Inline Styles:
are styles that are placed within opening tag.
Inline styles are used to override internal, external and browser default styles.
Interview Questions:
1. Which styles are having highest precedence?
a. external styles
b. browser default styles
c. embedded styles
d. inline styles
Answer: d
