📘 CSS Units और Properties को आसान हिंदी में समझिए
अगर आप वेब डेवलपमेंट सीख रहे हैं और CSS की बुनियादी प्रॉपर्टीज़ को अच्छे से समझना चाहते हैं, तो यह लेख आपके लिए बहुत उपयोगी है। यहाँ हम बात करेंगे px, em, rem, rgba, display:block, display:inline, 5%, linear-gradient, और position: absolute जैसे CSS के मूल तत्वों की।
1️⃣ px (Pixels) – सबसे बेसिक यूनिट
px (पिक्सेल) एक निश्चित माप होती है। यह स्क्रीन पर स्थिर रहती है, मतलब 1px हर डिवाइस पर लगभग उतना ही दिखता है।
h1 {
font-size: 24px;
}
📌 जब आपको कोई फिक्स्ड साइज़ देना हो जैसे बटन, बॉर्डर या टेक्स्ट के लिए — तो px सबसे सरल तरीका है।
2️⃣ em – Parent पर निर्भर यूनिट
em यूनिट अपने parent एलिमेंट के फ़ॉन्ट साइज पर निर्भर करती है।
p {
font-size: 1.5em;
}
➡️ अगर parent का font-size 16px है, तो 1.5em = 24px।
📝 इसका उपयोग scalable और responsive डिज़ाइन में होता है।
3️⃣ rem – Root से रिलेटेड यूनिट
rem का मतलब है “root em” — ये पूरी तरह से <html> एलिमेंट के font-size पर आधारित होती है।
html {
font-size: 16px;
}
h2 {
font-size: 2rem; /* 32px */
}
📌 rem का फायदा ये है कि यह हमेशा कंसिस्टेंट रहता है, चाहे nesting कितनी भी हो।
4️⃣ rgba() – कलर के साथ transparency
rgba() color function का मतलब है:
- r = Red (0-255)
- g = Green (0-255)
- b = Blue (0-255)
- a = Alpha (0 से 1 तक — transparency)
background-color: rgba(0, 0, 255, 0.5);
📌 ऊपर दिए गए उदाहरण में ब्लू कलर है जिसकी पारदर्शिता 50% है।
5️⃣ display: block और display: inline – Layout Control
display: block:
- पूरा row घेर लेता है।
- नई लाइन में आता है।
div {
display: block;
}
display: inline:
- टेक्स्ट के जैसे व्यवहार करता है।
- नई लाइन नहीं बनाता।
span {
display: inline;
}
📝 Example: div, p, section default block होते हैं जबकि span, a inline होते हैं।
6️⃣ 5% – Percentage Units
% यूनिट parent एलिमेंट के साइज़ पर निर्भर करती है।
.container {
width: 80%;
}
img {
height: 50%;
}
📌 Responsive डिज़ाइन के लिए % बहुत उपयोगी है।
7️⃣ linear-gradient() – कलर का सुंदर मिश्रण
यह CSS function दो या दो से अधिक रंगों को एक दिशा में मिक्स करता है।
background: linear-gradient(to right, #ff8a00, #e52e71);
🧡 Left से Right की ओर orange से pink में transition दिखेगा।
📌 आप angle जैसे 45deg या direction जैसे to bottom का उपयोग भी कर सकते हैं।
8️⃣ position: absolute – बिल्कुल control में
absolute position वाला एलिमेंट अपने सबसे नज़दीकी positioned ancestor (relative/absolute/fixed) के अनुसार position लेता है।
.box {
position: absolute;
top: 20px;
left: 50px;
}
📌 जब किसी एलिमेंट को exact location पर रखना हो — जैसे बटन को कार्ड के कोने में।
✅ इसे प्रयोग करने से पहले ध्यान रखें कि parent को position: relative देना ज़रूरी है।
✅ निष्कर्ष
| Property | मतलब | कहाँ काम आता है |
|---|---|---|
| px | Fixed size | Button, Font |
| em | Parent के हिसाब से | Nested text |
| rem | Root के हिसाब से | Global responsive size |
| rgba | Transparent color | Background, overlays |
| display | Block या inline layout | Layout control |
| % | Parent आधारित साइज़ | Responsive layout |
| linear-gradient | रंग का मिश्रण | Backgrounds |
| position: absolute | Exact positioning | Tooltip, Modals |
अगर आप एक Frontend Developer बनना चाहते हैं तो CSS की ये properties आपके हर UI component में मदद करेंगी। इन्हें projects में implement करें और देखें कैसे layout control में आता है।
✍️ लेखक: सिद्धार्थ जैन 📅 प्रकाशन तिथि: 1 अगस्त 2025