Advanced CSS in Hindi (professional website build)

Advanced CSS का मतलब है CSS के ऐसे concepts और techniques जिनकी मदद से हम modern, responsive, interactive और professional websites का design बना सकते हैं।

Basic CSS में हम color, font, margin, padding आदि सीखते हैं, जबकि Advanced CSS में layout control, animation, responsive design, effects और optimization आते हैं।

---

1. CSS Variables (Custom Properties)

CSS Variables की मदद से हम values को एक जगह define करके बार-बार use कर सकते हैं।

Syntax:

:root {
  --primary-color: blue;
  --font-size: 20px;
}

h1 {
  color: var(--primary-color);
  font-size: var(--font-size);
}

फायदे:

Feature	Description
Reusable	एक value को कई जगह use कर सकते हैं
Easy maintenance	एक जगह change करने पर सभी जगह update
Theme creation	Dark/Light mode बनाने में उपयोग

---

2. CSS Flexbox (Advanced Layout)

Flexbox एक powerful layout system है जो elements को row या column में arrange करता है।

Important Properties:

Property	Use
display:flex	Flex container बनाता है
flex-direction	Direction सेट करता है
justify-content	Horizontal alignment
align-items	Vertical alignment
flex-wrap	Items को next line में भेजना
gap	Elements के बीच space

Example:

.container {
 display:flex;
 justify-content:center;
 align-items:center;
 gap:20px;
}

---

3. CSS Grid Layout

CSS Grid complex layouts बनाने के लिए उपयोग होती है।

Example:

.container {
 display:grid;
 grid-template-columns: repeat(3,1fr);
 gap:20px;
}

Output:

Box 1 | Box 2 | Box 3
Box 4 | Box 5 | Box 6

Important Grid Properties:

Property	काम
grid-template-columns	Columns बनाना
grid-template-rows	Rows बनाना
grid-column	Column size
grid-row	Row size
gap	Space

---

4. CSS Animation

Animation से elements में movement और effects add कर सकते हैं।

@keyframes:

@keyframes move {
 from {
  left:0;
 }

 to {
  left:200px;
 }
}

.box {
 animation:move 2s;
}

Animation Properties:

Property	काम
animation-name	Animation का नाम
animation-duration	समय
animation-delay	Delay
animation-iteration-count	कितनी बार चले
animation-direction	Direction
animation-timing-function	Speed control

---

5. CSS Transition

Transition से किसी property के change को smooth बनाया जाता है।

Example:

button {
 background:red;
 transition:0.5s;
}

button:hover {
 background:blue;
}

जब mouse button पर जाएगा तो color धीरे बदलेगा।

---

6. CSS Transform

Transform से element को rotate, scale, move कर सकते हैं।

Function	काम
translate()	Move करना
rotate()	घुमाना
scale()	Size बढ़ाना/घटाना
skew()	Tilt करना

Example:

.box:hover {
 transform:scale(1.2);
}

---

7. Responsive Design

Website को अलग-अलग devices के अनुसार adjust करना responsive design कहलाता है।

Media Query:

@media(max-width:600px){

 body{
  background:black;
 }

}

Use:

• Mobile
• Tablet
• Laptop
• Desktop

---

8. CSS Position Advanced

Position से elements की location control करते हैं।

Position	Use
static	Default
relative	Normal position से move
absolute	Parent के हिसाब से position
fixed	Screen पर fixed
sticky	Scroll के साथ stick

Example:

.box{
 position:absolute;
 top:50px;
 left:100px;
}

---

9. CSS Pseudo Classes

Element की special condition को select करती हैं।

Example:

button:hover{
 color:red;
}

Important:

Selector	Use
:hover	Mouse आने पर
:focus	Active input
:first-child	पहला element
:nth-child()	Specific element

---

10. CSS Pseudo Elements

Element के किसी भाग को style करते हैं।

Example:

p::first-letter{
 font-size:30px;
}

Selector	Use
::before	Content से पहले
::after	Content के बाद
::first-letter	पहला अक्षर
::first-line	पहली line

---

11. CSS Advanced Selectors

Attribute Selector

input[type="text"]{
 border:2px solid blue;
}

Child Selector

div > p{
 color:red;
}

Adjacent Selector

h1 + p{
 color:green;
}

---

12. CSS Filters

Images और elements पर effects लगाने के लिए किया जाता है।

Example:

img{
 filter:blur(5px);
}

Properties:

Filter	काम
blur()	Blur effect
brightness()	Brightness
contrast()	Contrast
grayscale()	Black & White
sepia()	Old photo effect

---

13. CSS Box Shadow

Element को shadow देने के लिए किया जाता है।

.box{
 box-shadow:10px 10px 20px gray;
}

Syntax:

horizontal vertical blur color

---

14. CSS Gradient

दो या अधिक colors को mix करने किया जाता है।

Linear Gradient:

background:linear-gradient(red,blue);

Radial Gradient:

background:radial-gradient(red,blue);

---

15. CSS Clipping & Masking

Shape के अंदर content दिखाने के लिए किया जाता है।

Example:

img{
 clip-path:circle(50%);
}

Use:

• Creative designs
• Image effects

---

16. CSS Variables + Dark Mode

Example:

:root{
 --bg:white;
 --text:black;
}

.dark{
 --bg:black;
 --text:white;
}

---

17. CSS Architecture (Professional CSS)

Large projects में CSS को manage करने के लिए किया जाता है:

Method	Description
BEM	Naming system
OOCSS	Object oriented CSS
SMACSS	Scalable CSS structure
Utility CSS	छोटे reusable classes

---

18. CSS Performance Optimization

Website fast बनाने के लिए:

✅ Unused CSS हटाएं
✅ CSS Minify करें
✅ External CSS use करें
✅ Efficient selectors लिखें
✅ Large animations कम करें

• इसे भी पढ़े : Artificial intelligence
• इसे भी पढ़े : Machine learning
• इसे भी पढ़े : Data Analysis