Angular Global Styles का मतलब है ऐसी CSS rules जो पूरे Angular application पर apply होती हैं, किसी एक component तक limited नहीं रहतीं। Global styles application की foundation होती हैं, जिनमें layout, typography, theme और common UI behavior define किया जाता है।
इस chapter में हम Angular में global styles को सही तरीके से समझेंगे, कहाँ और कैसे define करनी चाहिए, और component-scoped styles के साथ इनका balance कैसे बनाया जाए।
Global Styles क्या होती हैं
Global styles वे CSS होती हैं जो:
- हर component के template पर apply होती हैं
- View Encapsulation से affected नहीं होतीं
- Application-wide consistency provide करती हैं
Angular में global styles directly browser की normal CSS rules की तरह behave करती हैं।
Angular Project में Global Styles की Location
Angular project में default global stylesheet होती है:
src/styles.css
याsrc/styles.scss
यह file Angular CLI द्वारा automatically load होती है।
body {
margin: 0;
font-family: Arial, sans-serif;
}
यह CSS पूरे application पर apply होगी।
CSS vs SCSS Global Styles
Angular CLI CSS और SCSS दोनों support करता है।
- CSS → simple, no preprocessing
- SCSS → variables, nesting, mixins, better structure
Large applications में SCSS ज्यादा preferred होता है।
Example SCSS:
$primary-color: #1976d2;
body {
font-family: Arial, sans-serif;
color: $primary-color;
}
Global Styles का Common Use
Global styles आमतौर पर इन cases में use की जाती हैं:
- CSS reset या normalize
- Typography (font-family, headings)
- Base colors और theme variables
- Layout helpers (container, grid)
- Utility classes
CSS Reset / Normalize
Browser defaults अलग-अलग होते हैं, इसलिए reset या normalize global level पर define किया जाता है।
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
यह reset पूरे app में consistency लाता है।
Typography को Global रखना क्यों जरूरी है
Fonts और text rules हर component में repeat नहीं करने चाहिए।
body {
font-family: 'Roboto', sans-serif;
line-height: 1.5;
}
h1, h2, h3 {
font-weight: 600;
}
यह approach maintainable और clean रहती है।
Theme Colors और CSS Variables
Modern Angular apps में CSS variables global styles में define करना best practice है।
:root {
--primary-color: #1976d2;
--secondary-color: #424242;
}
button {
background: var(--primary-color);
color: white;
}
Components इन variables को reuse कर सकते हैं बिना encapsulation तोड़े।
Global Utility Classes
Utility classes global level पर define की जाती हैं।
.text-center {
text-align: center;
}
.mt-10 {
margin-top: 10px;
}
यह classes multiple components में reuse की जा सकती हैं।
Angular.json में Global Styles Configuration
Angular CLI global styles को angular.json से load करता है।
"styles": [
"src/styles.css"
]
आप multiple global style files भी add कर सकते हैं।
"styles": [
"src/styles.css",
"src/theme.css"
]
यह order important होता है क्योंकि later files override कर सकती हैं।
Third-Party CSS Libraries
Bootstrap, Tailwind, या अन्य CSS frameworks global styles के रूप में include किए जाते हैं।
Example:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Third-party CSS हमेशा global होती है।
Global Styles vs Component Styles
Difference समझना बहुत जरूरी है:
- Global styles → application-wide rules
- Component styles → isolated, feature-specific
Rule of thumb:
- Structure, theme, reset → global
- UI logic, visual detail → component
Global Styles से Component Styling Override करना
Global styles component styles को override कर सकती हैं अगर selector ज्यादा strong हो।
Example:
button {
background: red;
}
यह rule सभी buttons को affect करेगी, चाहे component में कुछ और लिखा हो।
इसलिए global selectors concise और controlled होने चाहिए।
Best Practices for Global Styles
- Global styles minimal रखें
- Generic selectors (
div,p) avoid करें - CSS variables और utility classes prefer करें
- Heavy UI styling component level पर रखें
- Third-party CSS को isolate करके include करें
Common Mistakes
- सारी CSS global file में डाल देना
- Component encapsulation को ignore करना
- Over-specific selectors लिखना
- Global styles से unintended side effects create करना
सही Balance क्यों जरूरी है
Angular में scalable styling strategy का मतलब है:
- Global styles → foundation
- Component styles → detail
Global styles application को consistency देती हैं और component-scoped styles modularity। दोनों का सही balance ही professional Angular UI architecture बनाता है।
अगले chapter में हम CSS Isolation और Encapsulation को और deeper level पर समझेंगे, जिसमें अलग-अलग encapsulation modes और उनके trade-offs cover होंगे।