Sunrise Computer Classes: How to Insert CSS Link in HTML (In Hindi)

CSS Link Property (In Hindi)

WWW यानि World Wide Web वो शहर हैं जिसमें सभी भाग आपस में Links नामक Highways से जुडे हुए हैं। एक भाग से दूसरे भाग में आसानी से आ-जा सकते हैं। ठीक इसी तरह Links के माध्यम से हम भी एक Website से दूसरी Website, एक Page से दूसरे Page तक जाते हैं।Anchor Element द्वारा Links को Define किया जाता हैं। और CSS Link Properties द्वारा इन Links को Stylish बनाया जाता हैं। वैसे, CSS द्वारा Links के लिए कोई अलग Properties Define नहीं की गई हैं। Links को Style बनाने के लिए Font और Text Properties का ही इस्तेमाल किया जाता हैं।

Styling Link with CSS in Hindi

HTML Links को Style करने से पहले हमें Links को समझना होगा तभी हम Links को सही ढंग से Style कर पाएंगे।

HTML Link साधारण Text से अलग होती हैं. इसका व्यवहार परिस्थितियों के अनुसार बदलता रहता हैं। Link की Condition के हिसाब से चार Stages होती हैं।

Different Stages of a Link

Link – ये Link की पहली Condition होती हैं। इस Condition में Link पहली बार ब्राउजर में Open होती हैं। इस पर एक बार भी क्लिक नही किया गया हैं। इसे a:link Selector द्वारा Style किया जाता हैं।
Visited Link – जब किसी लिंक पर क्लिक किया जा चुका हो तो उस लिंक को Visited Link कहते हैं। इसे a:visited Selector द्वारा Style किया जाता हैं।
Hover Link – जब Mouse Pointer को किसी लिंक पर ले जाया जाता हैं, तो उस समय क्रिया को Hover कहते हैं। और जो बदलाव Hover के दौरान लिंक में होता हैं। उसे Hover Effect कहते हैं। इसे a:hover Selector द्वारा Style किया जाता हैं।
Active Link – वर्तमान में आप जिस लिंक पर होते हैं। उसे Active Link कहा जाता हैं। इसे a:active Selector द्वारा Style किया जाता हैं।

Default Style of Link

Link की Default Style को समझने के लिए हम पहले एक HTML Link Define करते हैं। जिस पर हम कोई भी Style Apply नही करेंगे।

सभी Browsers में HTML Elements के लिए CSS Style Declare की जाती हैं जो Browser की Built-in-CSS File में होती हैं। यहीं से HTML Links की Default CSS Style आती हैं। जो कुछ इस प्रकार होती हैं।

Link का Color Blue है।
Link Text Underlined हैं। Text के नीचे एक लाईन हैं।
Visited Link का Color Purple है. अगर आपको नही दिखा है तो एक बार इस लिंक पर क्लिक कीजिए।
Hover करने पर Mouse Pointer एक हाथ में बदल जाता हैं।
Active Link का Color Red हैं। देखने के लिए लिंक के ऊपर क्लिक दबाए रखे।

Declare Style Rule for Link

अब Link की विभिन्न Stages के बारे में जान लिया हैं और Link की Default Style से भी परिचित हो गए हैं। HTML Link को CSS द्वारा Stylish बनाते हैं।

<!DOCTYPE html>
<html>
<head>
<title>CSS Link Style</title>
<style>
a {
text-decoration: none;
}
a:link {
color: blue;
}
a:visited {
color: red;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href=”#”>This is Link</a>
</body>
</html>

OUTPUT-

Note: Link के लिए CSS Rule Declare करने से पहले Link की विभिन्न Stages के क्रम का अवश्य ध्यान रखें. जो इस प्रकार हैं.

Link → Visited Link → Hover Link → Active Link

<<Prev || Next >>

For Any Doubt Clear on Telegram Discussion Group

Join Us On Social Media

For Any Query @8604799387