२८. CSS borders in Hindi

HTML and CSS tutorial for beginners in Hindi

हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन २८ सीखेंगे।

पिछले लेसन में हम ने CSS background के बारे में सीखा।

आज हम CSS border देखेंगे।

CSS border Property

CSS border का उपयोग करके हम वेब पेज में किसी भी element को border डिस्प्ले कर सकते हैं।

CSS border में तीन values देते हैं। वह है color, style, और width। इन तीनों को एक ही shorthand property में दे सकते हैं। उसका सिंटेक्स ऐसा होता है।

border: width style color.

उदहारण के लिए

border: 1vw solid red;

इसमें 1vw बॉर्डर की width है, solid बॉर्डर की स्टाइल है, और red बॉर्डर का कलर है।

अब हम इसे हमारे स्क्रिप्ट में लिखेंगे।

एक नयी Notepad फाइल ओपन कीजिये। इस में lesson-27-1 का कोड कॉपी कीजिये।

<style> में #header में यह स्टेटमेंट लिखिये।

border: 1vw dashed red;

इस फाइल को "Lesson-28-1" और "Lesson-28-1.html" के नाम से save कीजिये। निचे दिखाई हुई आकृति देखिये। इस source कोड की PDF फाइल देखने के लिए निचे दी हुई आकृति पर क्लिक कीजिये।

आकृति २८-१ CSS border property

आउटपुट देखिये। Heading को एक बॉर्डर आयी है।

आकृति २८-२ CSS border property

CSS border-color property:

इस प्रॉपर्टी का उपयोग बॉर्डर को कलर देने के लिए होता है। इस में हम कलर का नाम, hex, rgb, या transparent दे सकते हैं। इसे ऐसा लिखते हैं।

border-color: value;

CSS border-style property:

अनेक प्रकार की स्टाइल्स होती है, जैसे solid, dashed, dotted, double, none, outset वगैरह। इसे ऐसा लिखते हैं।

border-style: value;

CSS border-width property:

इस प्रॉपर्टी की वैल्यूज values होती है thin, medium, और thick. Border width का measurement भी दे सकते हैं, जैसे 1vw। इसका syntax है

border-width: value;

CSS border-left property, CSS border-right property, CSS border-top property, CSS border-bottom property

हम left, right, top, और bottom के लिए अलग अलग बॉर्डर्स दे सकते हैं। जैसे

border-left: 0.5vw dashed #0000FF.

हम इसी तरह हर एक साइड के लिए अलग अलग कलर, स्टाइल, और width दे सकते हैं। उदाहरण,

border-left-color: #0000FF;
border-left-style: dashed;
border-left-width: 0.5vw;

हम इसे हमारे स्क्रिप्ट में लिखेंगे। एक नयी Notepad फाइल ओपन कीजिये। इसमें lesson-28-01 का कोड कॉपी कीजिये।

इस में #para3 के लिए यह कोड इन्सर्ट कीजिये।

  border-top-color: #00FF00;
  border-bottom-color: #00FF00;
  border-top-style: dashed;
  border-bottom-style: dashed;
  border-top-width: 0.3vw;
  border-bottom-width: 0.5vw;

इस फाइल को "Lesson-28-02" और "Lesson-28-02.html" के नाम से save कीजिये। इस source कोड की PDF फाइल देखने के लिए निचे दी हुई आकृति पर क्लिक कीजिये।

आकृति २८-३ CSS border properties for individual sides

इस का आउटपुट देखिये।

आकृति २८-४ CSS property for individual sides

Heading के लिए लाल डबल बॉर्डर आयी है। Paragraph ३ के लिए टॉप और बॉटम बॉर्डर्स आयी है जो dashed बॉर्डर्स हैं। आकृति २८-४ पर क्लिक कीजिये। एक नया वेब पेज ओपन हो जायेगा। इस पेज में आप बॉर्डर्स देख सकते हैं।

Important Points:

१. CSS border property का उपयोग एक element का बॉर्डर डिस्प्ले करने के लिए होता है। इसमें कलर, स्टाइल, और width देते हैं।
२. कलर नाम से, hex value से, या rgb से दे सकते हैं।
३. स्टाइल्स solid, double, dashed, dotted वगैरह होती है।
४. Width absolute या relative यूनिट्स में दे सकते हैं।
५. CSS अलग अलग border-color, border-style और border-width प्रॉपर्टीज होती है।
६. इसी तरह left, right, top, bottom हर एक साइड के लिए अलग अलग स्टाइल दे सकते हैं।

लेसन २७                                  लेसन २९