CSS outline Property in Hindi की पूरी जानकारी (with examples)

इस Tutorial में हम आपको CSS outline Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.

List of Content

CSS outline Property का परिचय – Introduction to CSS outline in Hindi.
Different Type of outline Properties in Hindi
outline Property Example in Hindi
outline VS border in Hindi
आपने क्या सीखा?

CSS outline Property का परिचय

किसी Element को Visually अधिक आकर्षक बनाने के लिए और अन्य आस-पास Defined Elements की तुलना में अलग दिखाने के लिए Outline का Use किया जाता हैं.

Outline, Element के चारों तरफ एक Line होती हैं, जो Border के बाहर दिखाई देती हैं. इसलिए इसे Outline कहते हैं.

Outline को Define करने के लिए CSS Outline Property का इस्तेमाल किया जाता हैं. आप Outline Width, Style, Color आदि को अपनी पसंदानुसार Set कर सकते हैं.

Different Type of outline Properties

Outline को Control करने के लिए CSS द्वारा कई अलग-अलग Properties उपलब्ध करवाई गई हैं. जिनके बारे में हम नीचे बता रहे हैं.

outline-style Property

इस Property द्वारा Outline की Style को Set किया जाता हैं. Style से हमारा मतलब हैं कि आप किस तरह की Outline लगाना चाहते हैं. CSS द्वारा निम्न Outline Style Provide की जाती हैं.

dotted – इस Value से Dot यानि Full Stop के चिन्ह वाली Outline Set होती हैं.
dashed – इस Value से Minus के चिन्ह जैसी Outline Set होती हैं.
solid – इससे एक Normal लाईन में Outline Set होती हैं.
double – इस Value से दो लाईन की Outline Set होती हैं.
groove – इस Value से Groove Style में Outline Set होती हैं.
ridge – इस Value से Rigde Style में Outline Set होती हैं.
inset – इस Value से Inset Outline Set होती हैं.
outset – इस Value से Outset Outline Set होती हैं.
none – कोई Outline Set नही होती हैं.
hidden – Outline Set हो जाती हैं लेकिन दिखाई नही देती हैं.

outline-style Declare करने का तरीका

{outline-width: dotted | dashed | solid | double | groove | ridge | inset | outset | none | hidden;}

outline-color Property

Outline का Color Set करने के लिए outline-color Property का इस्तेमाल किया जाता हैं. Outline Color को कई तरीकों से Declare किया जा सकता हैं.

Name Value – Color का नाम लिखकर जैसे, “Black”
RGB Value – RGB Value में जैसे, “rgb(255,255,255)”
Hex Value – Hex Value में जैसे, “#990000”
invert Keyword – Color को “invert” Declare करने पर Outline Color Black दिखाई देता हैं.

outline-color Declare करने का तरीका

{outline-width: red | rgb(255,200,200) | #333333 | invert;}

outline-width Property

Outline की मोटाई को Set करने के लिए outline-width Property को Use किया जाता हैं. Outline Width को आप कई तरीकों से Declare कर सकते हैं.

thin – इस Value से लगभग 1px के बराबर मोटाई की Outline Set होती हैं.
medium – इस Value से लगभग 3px के बराबर मोटाई की Outline Set होती हैं.
thick – इस Value से लगभग 5px के बराबर मोटाई की Outline Set होती हैं.
Custom Size – ऊपर की तीन Values के अलावा outline-width को px, in, cm, em आदि Format में भी Declare कर सकते हैं.

outline-width Declare करने का तरीका

{outline-width: thin | medium | thick | 15px;}

outline-offset Property

Border और Outline के बीच खाली जगह को Define करने के लिए outline-offset Property का इस्तेमाल किया जाता हैं. Element Border और Outline के बीच की खाली जगह पारदर्शी यानी Transparent होती हैं. इसकी Value को px, cm, in आदि Measurement Units में Declare कर सकते हैं.

outline-offset Declare करने का तरीका

{outline-offset: 15px;}

outline Property

यह outline Property की Shorthand Property हैं. क्योंकि इस Property द्वारा Outline की सभी Properties को एक ही Style Rule में Declare किया जा सकता हैं. outline Property द्वारा outline-width, outline-style, outline-color को एक बार में ही Declare कर सकते हैं. इनका Order मायने नही रखता हैं.

outline Property से Outline Declare करने का तरीका

{outline: 1px solid red;}

outline Property Example

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS outline Property Example</title>
<style type=”text/css”>

div1 {
outline: 4px solid red;border: 2px solid blue;
}

#div2 {
outline-style: dashed; outline-width: 3px; outline-color: green;border: 5px solid black;
}

div3 {
outline: 5px dotted pink;border: 2px solid green;outline-offset: 5px;
}

</style>
</head>
<body>

<p>नीचे हम 3 Div Define कर रहे हैं. जिसमे हम प्रत्येक DIV पर अलग-अलग प्रकार की outline इस्तेमाल कर रहे हैं. आप भी इसी तरह अन्य outline Properties का इस्तेमाल करके देख सकते हैं.</p>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

नीचे हम 3 Div Define कर रहे हैं. जिसमे हम प्रत्येक DIV पर अलग-अलग प्रकार की outline इस्तेमाल कर रहे हैं. आप भी इसी तरह अन्य outline Properties का इस्तेमाल करके देख सकते हैं.

This is Div1.

This is Div2.

This is Div3.

outline और border में अंतर

Outline भी बिल्कुल Border के समान ही होता हैं. इसलिए अक्सर Outline और Border को इस्तेमाल करते समय Confusion रहती हैं कि इन दोनों में से कौनसी Property का Use क्यों और कब करना चाहिए.

इसलिए नीचे Outline Property और Border Property में अंतर के बारे में बताया जा रहा हैं.

Outline Element Dimensions का हिस्सा नहीं होती हैं. लेकिन, Border Element का हिस्सा होती हैं. अधिक जानकारी के लिए CSS Box Model के बारे में पढे.
Outline से Element Size पर कोई प्रभाव नही पडता हैं. लेकिन, Border Element Size को प्रभावित करती हैं.
Outline को Border की तरह चारों तरफ अलग-अलग प्रकार से Set नही किया जा सकता हैं. यह चारों तरफ से एक जैसी रहती हैं.
Outline को गोल नही किया जा सकता हैं.

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS outline Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की outline Properties के बारे में भी जाना हैं. इसके अलावा आपने CSS Border और CSS Outline में अंतर को भी समझा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.