CSS Styles:Text, Margin & Padding, Display, Font in Hindi

Css में सभी रंग-बिरंगे बनाने वाले या सुंदर दिखाने वाले सभी स्टाइल्स मौजूद होते हैं। बिना style को लगाये वेबसाइट खूबसूरत दिख ही नहीं सकती। यहां कुछ styles को देखते हैं-

What is margin & it's use?

जिस तरह घर बनाते समय बाहरी के दीवार के बाहर की जगह जो छूटती है, उसी तरह वेब फाइल में content के box के बाहर भी कुछ न कुछ जगह छूटी रहती है, वही margin कहलाती है। कोई भी content , मान लीजिए heading ही, एक बाक्स जैसी block बनाता है, तो यह ब्लाक अपने आस-पास से जो जगह छोड़ता है, वही margin होती है।

Use of margin in css:

Margin को सामान्यतः pixel में लिखा जाता है। इसके अलावा % में भी लिखा जाता है। Margin को एक साथ अथवा अलग-अलग भी लिखा जा सकता है, जैसे margin-top, margin-bottom, margin-left and right.

Margin को निम्न तरीके से लिखा जा सकता है-

1. Auto: यह property लिखने पर browser अपने हिसाब से margin सेट करता है।

2. Length: margin की property pixel, pt, cm etc. में लिखी जा सकती है।

3. %: इसमें content के width के अनुसार margin सेट की जाती है।

4. Inherit: इसमें जो पहले वाले content की margin होती है, वही यह content भी ले लेता है।

उदाहरण के लिए एक पैराग्राफ के लिए margin-

p{

margin:5px,4px,3px,3px;

}

पुनः

p{

margin-top:5px;

margin-right:4px;

margin-bottom:3px;

margin-left:3px;

}

इसके अलावा एक और तरह से लिखा जा सकता है, जिसमें दो value दी जाती हैं, जो top और bottom के लिए एक साथ और left right को एक साथ।

p{

margin:10px, 10px;

}

Margin Collapse:

कभी-कभी ऐसा होता है कि दो लगातार content , जिनकी क्रमशः bottom और top margin दी होती है, collapse हो जाती है। और दोनों में जो ज्यादा मार्जिन होती है, वही apply हो जाती है। जैसे-

h1{

margin:0,0,50px,0;

}

h2{

Margin:10px,0,0,0;

}

दोनों के बीच की margin 60px न होकर, सिर्फ 50px हो जाएगी।

What is Padding in css in hindi?

जब भी कोई डेवलपर कोई content फाइल में बनाता है, तो वह अपने block के बाहरी दीवार यानी border से जो distance बनाता है, वह padding होती है। उसी तरह जैसे हम घर बनाते हैं रहने के लिए और उस घर में हम बाहरी दीवार से चिपक कर नहीं रहते कुछ दूरी पर उसके अंदर ही रहते हैं, वही padding कहलाएगी। ऊपर margin की तरह padding भी चारों ओर से बनाई जाती है। इसे तीन तरह से value दी जाती है-

1. Length: यह value cm, pt, px etc. में दी जाती है।

2. %: Content width के अनुसार प्रतिशत में padding दी जाती है।

3. Inherit: यह value देने पर पिछले content की padding ले लेता है।

उदाहरणः

p{

padding:inherit;

}

Text Styles in CSS:

Text style सेट करने के लिए कई property बदली जाती हैं-

1. Text-Colour

यह किसी लिखे हुए text का रंग सेट करता है। कलर simple colour name या colour code हो सकता है।

h1{

color:red;

}

2. Text-alignment

Alignment यह सेट करता है कि text , screen के किस ओर दिखेगा। जैसे-

Left: By default कोई text left ही दिखता है।

Center: Text को बीच में लाने के लिए center value दी जाती है।

Right: Text को दाहिने ओर सेट कर देता है।

Justify: यह value देने पर पूरा text दोनों ओर से बराबर होकर दिखता है।

Text alignment के लिए कुछ css property इस प्रकार हैं-

a. text-align

यह text को दाएं, बाएं बीच में सेट करता है।

b. text-align-last

यह last वाली लाइन को सेट करता है।

c. direction

यह text को right to left या left to right सेट करता है।

d. unicode-bidi

e. vertical-align

3. Text-decoration

इसके लिए निम्नलिखित property use होते हैं-

a.text-decoration-line: यह underline, overline इत्यादि text पर बना देता है।

b. text-decoration-color: यह decoration का रंग सेट करता है।

c. text-decoration-style: यह decoration को dotted, dashed , double आदि बनाता है।

d. text-decoration-thickness: यह decoration की thickness यानी मोटाई को पिक्सल में सेट करता है।

4. Text-transformation

यह text के capitalization को सेट करता है। इसकी property value कुछ इस प्रकार हैं-

a.none: इसमें जैसा लिखा होता है, वैसा ही बना रहता है।

b.capitalize: यह value देने पर हर शब्द का पहला अक्षर capital हो जाता है।

c.lowercase: पूरे text को lowercase में कर देता है।

d.uppercase: text को uppercase में बना देता है।

5. Text-Indentation

इससे text की पहली लाइन में शुरुआत से थोड़ी जगह छूट जाती है, जो कि किसी पैराग्राफ को लिखने का तरीका है।

p{

text-indent:4px;

}

6. Letter-spacing

Text के हर character के बीच में space देने के लिए letter spacing use होता है।

7. Line-Height

हर लाइन की height सेट करने के लिए यह property use होती है।

p{

line-height: 20px;

}

8. Word-Spacing

यह property हर word के बीच मे जगह देने के लिए प्रयोग की जाती है।

Font styles in CSS in hindi:

Font बदलकर text का रंग, आकार आदि बदला जाता है। Html 5 के आने के बाद कुछ property बदल गये हैं, जैसे font-color अब नहीं इस्तेमाल होता है। उसकी जगह सिर्फ color property text का रंग बदल देती है। Font style की कुछ styles इस प्रकार हैं-

1. Font-color:

Not supported in html 5

2.Font-weight:

यह style किसी text के font के boldness को सेट करती है।

h1{

Font-weight:300px;

}

3. Font-family:

यह font की family को सेट करने के लिए होती है। इसके लिए अब Google Fonts का उपयोग बढ़ गया है। इसे दो भागों में बांटा गया है-

Generic- इसमें monospace, serif and sans-serif आते हैं।

Font Family- इसमें Arial, Times New Roman, Verdana आदि विशेष रूप से शामिल हैं।

उदाहरण के लिए

body{

font-family:'Courier New', Courier, monospace;

}

4. Font-variant:

इसके मुख्यतः दो value हैं-

normal- यह text को उसी तरह रखती हैं ,जैसी वह है।

small-caps- यह text को capitalize करके और छोटा दिखाती हैं।

h1{

font-variant:normal;

}

5. Font-style

यह italic, oblique और normal value में फॉण्ट को दिखाती हैं।

Display properties in CSS in hindi

Css में display property यह तय करती है कि को ई element कैसे दिखेगा जैसे block में दिखेगा अथवा लाइन में दिखेगा।

display:block यह property किसी content को ब्लाक यानी block level elements की तरह दिखाती है, जैसे <span> टैग inline element है, अगर इसकी display value block कर दिया जाये, तो यह heading की तरह दिखेगी।

display:inline यह property element को inline elements के रूप में दिखाती है। जैसे अगर heading टैग को यह property दे दी जाय, तो वह inline elements की तरह दिखेगी।

display:inline-block किसी element या content को लाइन में ही block के रूप में दिखाने के लिए इस property का प्रयोग किया जाता है। block में दिखाने वाले element को कुछ width देनी पड़ती है।

Width & Height in CSS in hindi

Width और height किसी भी HTML element जैसेः div,image, body आदि की लंबाई और चौड़ाई को निर्धारित करती हैं। इसकी कुछ properties निम्नलिखित हैं-

1. Width

   यह किसी element की fixed width होती है।

2. max-width

   यह किसी element की अधिकतम width होती है। अथवा उस element की width वर्तमान में इससे कम भी हो सकती है, पर इससे ज्यादा नहीं हो सकती है।

3. min-width

   यह किसी element की कम से कम width होती है। ज्यादा से ज्यादा इसकी चौड़ाई कुछ भी हो सकती है।

4. Height

   यह किसी element की fixed लंबाई होती है। यह कभी कम-ज्यादा नहीं दिखती है ।

5. max-height

   यह किसी element की अधिकतम height होती है। अथवा उस element की height वर्तमान में इससे कम भी हो सकती है, पर इससे ज्यादा नहीं हो सकती है।

6. min-height

   यह किसी element की कम से कम height होती है। ज्यादा से ज्यादा इसकी ऊंचाई कुछ भी हो सकती है।

7. Box-sizing

   Box-sizing:Border-box; set कर देने से बाक्स अपनी दी हुई width, height में padding, border को शामिल कर लेता है, उन्हें अलग से width अथवा height नहीं बढ़ाने देता है।