Advanced CSS Topics
1. CSS Variables (Custom Properties)
CSS variables se aap ek jagah value define karke use baar-baar use kar sakte hain.
:root {
--main-color: #db1d29;
--font-stack: 'Montserrat', sans-serif;
}
body {
color: var(--main-color);
font-family: var(--font-stack);
}
2. CSS Specificity
Specificity decide karta hai ki agar multiple CSS rules same element me apply ho rahe hain to kaunsa rule apply hoga.
3. CSS Pseudo-classes & Pseudo-elements
Pseudo-classes se elements ke special state ko target karte hain, jaise :hover
, :nth-child()
. Pseudo-elements se element ke kisi hissay ko style karte hain, jaise ::before
, ::after
.
4. CSS Calc()
Calc() function se aap CSS me arithmetic kar sakte hain, jisme mixed units use kiye ja sakte hain.
width: calc(100% - 50px);
5. CSS Blend Modes
Colors aur images ko mix karne ke liye blend modes use hote hain, jaise multiply
, screen
.
6. CSS Filter Effects
Images aur elements par blur, grayscale, brightness jaise effects apply karte hain.
7. Advanced Selectors
Attribute selectors, sibling selectors, group selectors jese complex selectors CSS ko powerful banate hain.
8. CSS Shorthand Properties
Ek hi property me multiple related values dene ke liye shortcut syntax ka use karna.
9. Media Queries - Advanced Usage
Screen size ke alawa orientation, resolution, environmental factors ke liye advanced responsive design create karna.
10. CSS Grid and Flexbox Advanced Features
Auto placement, template areas, alignment aur layering jaise features ko achhi tarah samajhna aur use karna.
Summary
Advanced CSS topics aapko modern aur interactive websites banane me madad karte hain. Inhe seekhna aapke web development skills ko professional level par le jata hai.