CSS Properties in Hindi Tutorial for Beginner | CSS Property क्या है?

by
Table of Contents hide
1 CSS Properties in Hindi
2 CSS Rules क्या होता है?
3 CSS Property
4 CSS Basic Property
4.1 Background Property
4.2 Border Property
4.3 Text Property
4.4 Font-Property
4.5 CSS Color Property
4.6 Text Decoration Property
4.7 Table Property in CSS
4.8 CSS List Property
4.9 CSS Overflow Property
4.10 CSS Position Property
4.11 CSS Display Property
5 Conclusion
6 अन्य CSS Tutorial के सुझाव

CSS Properties in Hindi

webpage को look and feel देने के लिए css का उपयोग होता है | पुरे website की design और style css से manage की जाती है |

अब सवाल ये आता है की css से style कैसे लगायी जाती है ? उसके लिए css में कुछ rules को define की गयी है |

CSS Rules क्या होता है?

CSS rule css properties की group होती है जिसे targated html element पे लगायी जाती है | ये selector और properties के combination से बनती है | selector वो html element होता है जिसपे css लगाना होता है | और css properties उन style को दर्शाता है जिसे targated element में लगाना होता है |

CSS Property

CSS Property वो होता है जो किसी style को दर्शाता है | जैसे किसी element की font बदलना या फिर उसमे background लगाना | ये सब एक एक style है और इन style को property के जरिये लिखी जाती है |

css style देने के लिए css property का नाम और उसकी value को :(colon) से अलग करके लिखी जाती है |

Syntax:

Selector { property-name : property-value; }

CSS Basic Property

css में जितने भी style लिखी जाती है उन सभी के लिए property define की गयी है | उस property में से कुछ basic properties हैं जिसे हम इस article में discuss करेंगे |

Background Property

किसी webpage में background set करने के लिए background property का उपयोग होता है | ये property कई properties का समरोह है |

background-colorकिसी element की background को color करने के लिए background-color property का इस्तेमाल होता है |
background-image propertyइस property से किसी element या पुरे वेबपेज के background में image लगा सकतें हैं |
background-position property background-position property से background image की position सेट की जाती है |
background-attachment property background-attachment property से background image को content के साथ scroll करवा सकतें या फिर fixed रख सकतें हैं|
background-size propertybackground-size property से background image की चौडाई(width) और लम्बाई(height) को सेट कर सकतें हैं | और इस value को %(percentage) या pixel से दी जा सकती है |
background origin propertybackground origin property से हम background image को कहाँ से लगाना है वो बतातें हैं | जब हम किसी वेबपेज या किसी container के अंदर background-image लगातें हैं | तब वो image, default padding area से सुरु होता है |
पर background-origin से image की सुरुआत को बदल सकतें हैं | इस property से background image को content के साथ सुरु कर सकतें हैं या फिर border के साथ सुरु कर सकतें हैं |
background-clipbackground clip property का इस्तेमाल background image या फिर bckground color की origin को बताने के लिए किआ जाता है | इसकी default value border-box है |

Border Property

CSS Border Property के जरिये किसी भी element में border लगा सकतें हैं | इस property group में अन्य properties हैं: border-width, border-style, border-color |

border-widthइस property से border को मोटा या पतला रख सकतें हैं |
border-styleborder को अलग अलग style देने के लिए border-style property का इस्तेमाल होता है | 
border-colorborder-color property से border को color दिया जाता है |

Text Property

वेबसाइट में text की visual appearance को control करने के लिए css text property का इस्तेमाल होता है | इससे text के look को style की जाती है |

Text Color Propertyइस property से text की color set की जाती है |
Letter SpacingLetter Spacing के जरीये शब्दों के अक्षरों के बिच दुरी को नियंत्रित किया जाता है |
Word SpacingWord Spacing के जरीये शब्दों (words) के बिच दुरी को नियंत्रित किया जाता है | 
Indent Propertyइस property के जरिये पहली line की text की दुरी को नियंत्रित की जाती है |
Text-AlignText-Align property से text को alignment दी जाती है |
Text-Decorationtext के साथ decorated line लगाने के लिए Text-Decoration property का उपयोग होता है |
Text-Transformtext-transform property से text को छोटा , बड़ा या capitalise कर सकतें हैं |
Text-Shadowtext-shadow property से text में shadow लगायी जाती है | Shadow को horizontal या vertical दोनों तरफ से सेट किया जा सकता है |

Font-Property

वेबपेज में फॉन्ट को सही लुक देने और पुरे कंटेंट की सजावट (visual appearance) को सेट करने के लिए CSS Font Property का इस्तेमाल होता है | और font property group के अन्य properties निचे लिस्ट में दी गयी हैं |

font-familyCSS में font family से text की font को दर्शाया जाता है |
“Times New Roman”, Arial, Helvetica, Georgia आदि सब फॉन्ट फेमिली हैं |
font-styleFont Style का इस्तेमाल फॉन्ट को italique करने के लिए की जाती है |
font-weightइस property से फॉन्ट कितना मोटा या पतला दिखेगा वो सेट किया जाता है |
font sizeFont Size property से फॉन्ट को बड़ा या छोटा करके दिखाने के लिए इस्तेमाल होता है |
इस property की value pixel (px) या em से दर्शाया जाता है |

CSS Color Property

CSS Color Property का उपयोग किसी वेबसाइट को colorful बनाने के लिए किया जाता है | चाहे वो text color हो, या background colour या फिर border colour सब css color property से set की जाती है |

CSS Color Value को 3 तरह से लिखी जाती है :

  1. कलर के नाम Color Name (Example: green, blue, red)
  2. हेक्सा कोड Hexa Code (#ff0000, #fff000)
  3. आर.जी.बी R.G.B (0,0,255)

Hexa Code में css value को #सिंबल और 6 digits से दरसाया जाता है, जैसे की #RRGGBB | इस 6 डिजिट में पहले 2 डिजिट रेड कलर, दुसरे 2 डिजिट ग्रीन कलर और आखिरी 2 डिजिट ब्लू कलर को दर्शाता है |

RGB Code red, green और blue को दर्शाता है | इन तीनो कलर के मेल से बाकी कलर बनते हैं और RGB की value 0 से लेकर 255 तक दी जाती है |

Text Decoration Property

Text को decoration देने के लिए text-decoration property का इस्तेमाल होता है | ये एक property का ग्रुप है, जिसमे 4 properties हैं जिसे निचे लिस्ट में देखें |

text-decoration-lineइस property में text के साथ line लगायी जाती है | वो line text के निचे या ऊपर या बिच में लगायी जा सकती है |
text-decoration-line property के value हैं : 1) underline, 2) overline, 3) line-through, 4) none
text-decoration-styletext-decoration-line को style देने के लिए इस property का इस्तेमाल होता है |
CSS text-decoration-style property की values हैं : 1) solid, 2) dotted, 3) dashed, 4) double, 5) wavy
text-decoration-colorइस property में text-decoration line को color कर सकतें हैं |
text-decoration-thickness इस property में text-decoration की thickness बढाई या कम की जा सकती है | इसकी value pixel में set कर सकतें हैं |

Table Property in CSS

HTML Table को style देने के लिए css table property का उपयोग होता है | इस property group list में अन्य properties हैं:

border-collapse propertytable border के बिच के गैप को रखने या हटाने के लिए border-collapse property का इस्तेमाल होता है |
border-spacingइस property से table के cells के बिच की दुरी को कम या ज्यादा की जा सकती है |
vertical-alignvertical-align property से table में data की vertical align को नियंत्रित की जाती है | 
caption-sidecaption-side property से table के caption को नियंत्रित कर सकते हैं |
table caption की default position ऊपर की और होता है | इस property से इसकी position निचे भी की जा सकती है |
empty-cellsempty-cells property के जरिये table की खाली cell के border को छुपायी जा सकती है |
table-layouttable-layout property से table की layout को नियंत्रित की जाती है |
जब table में ज्यादा data डाल दी जाती है तो table की चौडाई बढ़ जाती है | उसे fixed रखने के लिए table-layout property का इस्तेमाल होता है |

CSS List Property

css list property से html list के style को customize की जाती है | और इसमें 3 properties आतें हैं:

List-Style-Typelist-style-type property से marker की लुक को बदली जाती है |
unordered list की default marker एक भरी हुयी गोला से दर्शाया जाता है |
और ordered list की default marker number से सुरु होती है |
List-type-positionlist-type-position से लिस्ट आइटम और marker की दुरी को align किया जाता है |
list-style-imagelist-style-image property के जरिये लिस्ट के marker की जगह कोई image लगा सकतें हैं |

CSS Overflow Property

अगर content element के size यानि उसकी width और height से ज्यादा हो तो, वो content बाहार निकल आता है | इसे overflow होना कहते हैं | element के इस overflow हो रहे content को संभालने के लिए css में, overflow property का इस्तेमाल किया जाता है |

css overflow properties के लिए 4 प्रकार के values को define किया गया है, जो content को अलग अलग तरीके से handle करतें हैं | और css overflow property values हैं: 1)visible, 2)hidden, 3)scroll, 4)auto

CSS Position Property

CSS Position Property से elements की position में फेर बदल की जाती है | html element की position में फेर बदल करने के लिए position property को कई type में बाटां गया है |

CSS में 5 तरह की position properties यानि 5 position types बताई गयीं है और वो है : 1) static, 2)relative, 3)absolute, 4)fixed, 5)sticky

CSS Display Property

CSS Display Property के जरिये html element के display nature को बदली जाती है |

CSS में Display Property के values और उसका उपयोग निचे बताया गया है:

  • none – इस value से element, html page में दिखाई नहीं देती है
  • inline – html elements जिनकी default display property value block है, अगर उन्हें एक line में दिखाना है, तो display property की value inline सेट करनी पड़ती है |
  • block – html elements जिनकी default display property value, inline है अगर उन्हें एक नयी line में दिखानि है, तो display property की value, block सेट की जाती है |
  • inline-block : inline-block value से elements dual behave करती है, मतलब elements एक line पे सजी हुयी रहती है और box के हिसाब से भी दिखाई देती है |
  • list-item : list-item display property value से elements, list के हिसाब से दिखाई देंगी |
  • inherit – इसमें child element अपनी parent element की display property value से सेट होता है |
  • initial – अगर हम किसी element का display value को उसकी original display property से सेट करना चाहतें हैं, तो initial value का इस्तेमाल करेंगें |

Conclusion

इस आर्टिकल में css property क्या होता है और कितने प्रकार के css properties होतें हैं, उसे संक्षेप में बताया गया है | सारे properties को विस्तार से उदाहरण के साथ समझने के लिए कृपिया निचे दी गए links को पढ़ें |

अन्य CSS Tutorial के सुझाव