Cascade
📌 Covered in this chapter:
Cascade · Source Order · Specificity · Inheritance · Browser Defaults · User Styles · Author Styles · !important · Inline Styles · Debugging · Cascade Order · Best Practices
Welcome to Chapter 7: Cascade — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Cascade Ante Enti?
Cascade ante enti? Multiple CSS rules same element ni target chesina, browser e rule apply cheyali decide chese mechanism. "Cascading Style Sheets" lo "Cascading" exactly idi — waterfall la rules top nundi bottom ki flow avuthu final style form avuthundi.
Cascade four factors consider chestundi:
- Origin — browser defaults, user settings, author (developer) styles
- Importance —
!importantdeclarations - Specificity — selector weight (ID > class > element)
- Source order — same specificity ayite last rule wins
2Source Order — Later Rule Wins
Specificity and importance equal ga unte, stylesheet lo last ga vachina rule win avuthundi:
CSS — Source Order▶ Try in Editor
p {
color: blue;
}
p {
color: green;
}
/* Later rule wins — text appears GREEN */3Inheritance, Browser Defaults & Style Origins
- Inheritance: Some properties (color, font-family) parent nundi child ki inherit avuthayi; others (margin, padding) inherit avvavu
- Browser defaults (User Agent): Built-in styles —
<h1>bold,<a>blue underline - User styles: Browser extensions or accessibility settings override cheyochu
- Author styles: Developer CSS — external, internal, inline
| Origin | Example | Priority (low → high) |
|---|---|---|
| User agent | Browser built-in stylesheet | Lowest |
| User | Custom browser font size | Medium |
| Author | Your styles.css | High (normal) |
| Author + !important | color: red !important; | Highest (avoid abuse) |
4!important & Inline Styles
CSS
.alert {
color: orange !important; /* Overrides normal author rules */
}Inline styles (style="color: red;") specificity ekkuva — override cheyadam kashtam. Production lo inline styles avoid cheyandi except dynamic JS cases.
💡 Cascade Best Practices
!importantrarely use cheyandi — specificity wars start avuthayi- DevTools (F12 → Elements → Styles) lo crossed-out rules chusi debug cheyandi
- Consistent CSS architecture maintain cheyandi — cascade predictable ga undali
5Debugging Conflicting Styles
Styles apply avvatam leda ante check cheyandi:
- Selector correct ga match avuthundaa? (DevTools element highlight)
- Higher specificity rule override chestundaa?
!importantor inline style undaa?- Typo in property name? (invalid properties ignore avuthayi)
- Stylesheet load avuthundaa? (Network tab)