CSS Outline Property का Use कैसे करें- हिन्दी में जानकारी

अपने बहुत-सी websites पर देखा होगा कि वहाँ कई बार किसी element की border के चारों तरफ भी एक colorful एरिया होता है। आपके दिमाग मे भी आया होगा कि ऐसा डिजाइन किस property के इस्तेमाल से होता है। तो आज हम आपको इसी के बारे में बताने जा रहें हैं। Border के चारों तरफ जो एरिया define और स्टाइल किया जाता है वो CSS Outline Property से होता है।

CSS Outline Property क्या है?

किसी element के चारों तरफ और Border के बाहर जो element को अलग दिखने के लिए लाइन को define किया जाता है उसको Outline कहा जाता है।
ये तो आप सभी जानते ही हो कि css का प्रयोग हम markup language में तैयार किये गए किसी web page को सुन्दर और आकर्षक बनाने के लिए करते हैं। उसी प्रकार हम किसी element को अलग और आकर्षक बनाने के लिए outline का use करते हैं।

3 ways to insert CSS-किसी webpage में CSS कैसे Add करें

What is CSS in Hindi-CSS क्या है और इसके क्या फायदे हैं?

All css outline property

एक element की outline , element की border से अलग होती है। इससे element की border के बाहर एक draw तैयारा की जाती है। Outline की height और width से element की height और width पर कोई फर्क नहीं पड़ता।
CSS में आउट्लाइन की properties इस प्रकार होती है:-

1. outline-style
2. outline-color
3. outline-width
4. outline-offset
5. outline

1.outline-style

सीएसएस में outline-style property का प्रयोग किसी element की outline को स्टाइल देने के लिए होता है जिस प्रकार आप border प्रॉपर्टी को स्टाइल देते हो। सीएसएस में outline property में आप नीचे लिखी values दे सकते हो।
dotted – इस Value से आउट्लाइन को dot ( . ) में set किया जाता है।
dashed –इस Value से आउट्लाइन को dashed ( — ) में set किया जाता है।
solid – इस Value से आउट्लाइन को solid( normal line ) में set किया जाता है।.
double –इसमें आउट्लाइन की एक जैसी 2 lines define की जाती है।
groove –Outline को 3D groove स्टाइल मे दिखने के लिए इसका use होता है।
ridge – इसमें outline को 3D ridge में दिखाया जाता है
inset – इसमें outline को 3D इन्सेट मे दिखाया जाता है।
outset – इसमें outline को 3D outset में दिखाया जाता है।
none – इसमें कोई आउट्लाइन नहीं दी जाती।
hidden – Outline को hide रखने के लिए इसका use होता है।
CSS Syntax
outline-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

2.Outline-color

किसी element की आउट्लाइन के color को specify करने के लिए css outline-color property का प्रयोग किया जाता है। Outline को declare करने के लिए आप ये values दे सकते हो।
invert :-कलर को invert declare करने के लिए। ये by default ब्लैक होता है।
Color Name :-इसमें कलर का नाम लिखा जाता है जैसे-red , green।
Hexa:- इसमें कलर को Hexadecimal color देने के लिए जैसे-#0000ff।
RGB:- कलर को rgb वैल्यू देकर जैसे-rgp(255, 0, 0 )
RGBA:- इसमें कलर को rgba वैल्यू दी जति जी जैसे- rgba(255, 0, 0, 1 )
HSL:-कलर को hsl वैल्यू देकर जैसे- hsl(120, 100%, 50%)
HSLA:- आप hsla वैल्यू भी define का सकते हो जैसे- hsla(120, 100%, 50%, 1 )

CSS Syntax
outline-color: invert / color / initial / inherit ;

3.Outline-width

किसी भी आउट्लाइन की width को set करने के लिए outline-width property का प्रयोग किया जाता है। Outline की width को declare करने के लिए वैल्यू इस प्रकार है-
1. Predefine Value:- इसमें पहले से define की गई 3 values में से एक वैल्यू दी जाती है जैसे-thin, medium, और thick ।
2. lenth:- इसमें आउट्लाइन को px , in, cm, em आदि मे declare किया जाता है।
CSS Syntax
outline-width: thin / medium / thick / lenth ;

4.CSS Outline-offset

Border और outline के बीच की खाली जगह को बताने के लिए outline-offset property का use किया जाता है। Outline और border के बीच की जगह हमेशा transparent ही रहती है।
CSS Syntax
outline-offset: lenth ;
आप outline-offset को lenth वैल्यू दे सकते हो जैसे-px , em , cm etc.

5.outline

ये outline-style, outline-width और outline-color की shorthand property है। इसमें इन तीनों को एक साथ ही declare किया जाता है।

Web development सीखने के लिए 4 Best Websites-हिंदी में
CSS Syntax
outline: 2px solid red ;

NOTE:- Outline से element के साइज़ पर कोई फर्क नहीं पड़ता। Border की तरह outline की top , left, bottom और right property नहीं होती। Outline को border की तरह चारों तरफ अलग-अलग set नहीं किया जा सकता। यह चारों तरफ एक जैसी ही होती है। Outline को border की तरह round नहीं किया जा सकता।

इस आर्टिकल मे आपको CSS Outline Property के बारें में विस्तार से बताया गया था। इस विषय से रिलेटेड यदि आपका कोई सवाल या सुझाव हो तो हमें जरूर बताएं। आप हमारे पूरे CSS Tutorial को फॉलो करके आसानी से css को सीख सकते हो।