CSS Properties in Hindi
CSS (Cascading Style Sheets) का उपयोग HTML elements को attractive, readable और responsive बनाने के लिए किया जाता है। CSS की मदद से हम किसी element का background, color, size, border, text alignment, font और spacing जैसी कई चीजों को control कर सकते हैं।
नीचे कुछ commonly used CSS properties को आसान Hindi में examples के साथ explain किया गया है। इन properties को समझना CSS सीखने के लिए काफी important है क्योंकि real-world websites में इनका बहुत ज्यादा use होता है।
1. background-color
background-color property का उपयोग किसी HTML element के background का color set करने के लिए किया जाता है। इसमें हम color name, HEX value, RGB, RGBA आदि का use कर सकते हैं।
यह property पूरे element के background area पर color apply करती है। उदाहरण के लिए किसी div को light blue background देना हो तो:
ऊपर background-color: lightblue; की वजह से div का background light blue दिखाई देगा।
उदाहरण के लिए background-color: #131724; लिखकर dark background भी दिया जा सकता है।
2. background-image
background-image property का उपयोग किसी element के background में image लगाने के लिए किया जाता है। Image को आमतौर पर url() function के अंदर specify किया जाता है।
उदाहरण:
यहाँ bg.jpg image को page के background में लगाने की कोशिश की जाएगी। अगर image file HTML/CSS file के सही path पर मौजूद नहीं है, तो background image दिखाई नहीं देगी।
Useful Background Properties
background-image के साथ आगे चलकर background-size, background-position और background-repeat जैसी properties भी use की जा सकती हैं।
3. border
border property किसी HTML element के चारों ओर border लगाने के लिए use की जाती है। Border में मुख्य रूप से उसकी width, style और color define किए जाते हैं।
उदाहरण के लिए:
इस example में 2px border की thickness, solid border का style और red border का color है।
Border के दूसरे styles जैसे dashed, dotted और double भी use किए जा सकते हैं।
4. height और width
width property किसी element की चौड़ाई और height property उसकी ऊँचाई set करने के लिए use होती है।
इन properties में px, %, em, rem और कुछ situations में vh तथा vw जैसी units use की जा सकती हैं।
ऊपर div की width 200 pixels और height 100 pixels रखी गई है। इसके कारण element का आकार निश्चित हो जाएगा।
5. color
color property का उपयोग text का color बदलने के लिए किया जाता है। यह property केवल text के foreground color को control करती है, background को नहीं।
ऊपर सभी matching h1 headings का text darkblue color में दिखाई देगा। Color को name, HEX, RGB या अन्य supported color formats में define किया जा सकता है।
6. text-align
text-align property का उपयोग text को horizontal direction में align करने के लिए किया जाता है। इसके commonly used values left, center, right और justify हैं।
text-align: center; लगाने पर paragraph का text अपने container के center में दिखाई देगा। इसी तरह left और right से text को left या right side पर रखा जा सकता है।
7. font-family
font-family property यह तय करती है कि text को किस font family में display किया जाएगा। इससे website के text की appearance और readability को control किया जा सकता है।
यहाँ Arial primary font है और sans-serif fallback family है। अगर किसी कारण से Arial उपलब्ध नहीं है, तो browser available sans-serif font का use कर सकता है।
8. font-size
font-size property का उपयोग text का size set करने के लिए किया जाता है। CSS में इसके लिए px, em, rem, percentage और अन्य units का use किया जा सकता है।
ऊपर h2 heading का font size 24px किया गया है। अलग-अलग elements के लिए अलग font sizes रखे जा सकते हैं।
9. font-style
font-style property का उपयोग text को normal, italic या oblique style में display करने के लिए किया जाता है। इसका सबसे common use text को italic बनाने के लिए होता है।
font-style: italic; लगाने पर paragraph का text italic दिखाई देगा।
10. font-weight
font-weight property text की thickness यानी मोटाई को control करने के लिए use की जाती है। इसका common use text को bold करने के लिए होता है।
font-weight: bold; text को bold appearance देता है। इसके अलावा numeric values जैसे 400, 500, 600 और 700 भी कई fonts के साथ use की जा सकती हैं।
11. margin
margin property किसी element के बाहर की खाली जगह को control करने के लिए use की जाती है। इसका मतलब है कि margin element और उसके आसपास मौजूद दूसरे elements के बीच space create करती है।
margin: 20px; element के चारों तरफ 20 pixels की बाहरी space create करती है। Margin को अलग-अलग directions में भी control किया जा सकता है:
margin-top– ऊपर की spacemargin-right– दाईं तरफ की spacemargin-bottom– नीचे की spacemargin-left– बाईं तरफ की space
12. padding
padding property किसी element के अंदर की खाली जगह को control करने के लिए use की जाती है। यह content और element की border के बीच space create करती है।
padding: 20px; लगाने पर element के content और उसकी border के बीच 20 pixels की अंदरूनी space मिलेगी। Padding को भी अलग-अलग directions में control किया जा सकता है।
padding-top– ऊपर की अंदरूनी spacepadding-right– दाईं तरफ की अंदरूनी spacepadding-bottom– नीचे की अंदरूनी spacepadding-left– बाईं तरफ की अंदरूनी space
Margin और Padding में अंतर
margin और padding दोनों spacing के लिए important CSS properties हैं, लेकिन इनके काम में एक basic difference होता है।
| Property | Space कहाँ बनती है? | मुख्य उपयोग |
|---|---|---|
margin |
Element के बाहर | Elements के बीच distance बनाने के लिए |
padding |
Element के अंदर | Content और border के बीच space के लिए |
उदाहरण के लिए, किसी card को दूसरे card से दूर करना हो तो margin useful है। वहीं card के अंदर text और उसकी border के बीच space चाहिए तो padding use की जाती है।
इन CSS Properties का Combined Example
Real websites में CSS properties को अकेले नहीं बल्कि एक साथ use किया जाता है। नीचे एक simple card example है जिसमें background, border, width, color, text alignment, font, font size, font weight, margin और padding जैसी properties को combine किया गया है।
इस example में कई CSS properties को एक साथ use किया गया है। इससे एक simple HTML div को card जैसा layout दिया गया है। इसी तरह real websites में अलग-अलग properties को combine करके buttons, cards, navigation bars, forms और अन्य UI elements design किए जाते हैं।
CSS Properties का महत्व
CSS properties website के visual design को control करने का मुख्य तरीका हैं। इनके द्वारा HTML elements का color, size, spacing, border, background और text appearance बदला जा सकता है।
जैसे-जैसे CSS की knowledge बढ़ती है, आप basic properties के साथ-साथ display, position, flexbox, grid, box-sizing, border-radius, box-shadow और responsive design से जुड़ी properties भी सीख सकते हैं।
Note: CSS properties का सही combination website को visually appealing और user-friendly बनाने में मदद करता है। लेकिन बहुत ज्यादा unnecessary styling से बचना चाहिए और design के साथ readability तथा performance का भी ध्यान रखना चाहिए।
Related Questions (FAQ in Hindi)
- CSS और Inline CSS में क्या अंतर है?
emऔरremunits में क्या difference होता है?- CSS में margin collapse क्या होता है?
box-sizingproperty क्या होती है?- Responsive design के लिए कौन-कौन सी CSS properties useful होती हैं?
- क्या हम एक ही element पर multiple CSS properties use कर सकते हैं?
Request
Leave a Comment
INITIALIZING...
INITIALIZING...
Comments Total: 0 comments