CSS Links Property की मदद से हम HTML में दिए गए links को अपनी website के design के अनुसार style कर सकते हैं। Link का color बदलना, underline हटाना, mouse hover पर effect देना, visited link का color बदलना और link को button जैसा दिखाना CSS की मदद से आसानी से किया जा सकता है।
इस tutorial में हम CSS Links को examples, code और output के साथ आसान हिन्दी में समझेंगे। अगर आप CSS सीख रहे हैं, तो यह lesson आपके लिए उपयोगी होगा।
CSS Links Property क्या है?
HTML में link बनाने के लिए <a> tag का उपयोग किया जाता है। CSS की मदद से हम इस link के appearance और अलग-अलग states को control कर सकते हैं।
एक link की सामान्य CSS states होती हैं:
- :link – ऐसा link जिसे अभी visit नहीं किया गया है।
- :visited – ऐसा link जिसे पहले visit किया जा चुका है।
- :hover – जब mouse link के ऊपर जाता है।
- :active – जब link पर click किया जा रहा होता है।
HTML में Simple Link कैसे बनाएं?
सबसे पहले एक simple HTML link बनाते हैं:
<a href="https://www.example.com">Visit Website</a>Output: Visit Website
अब CSS की मदद से इस link को अपने हिसाब से design करते हैं।
CSS से Link का Color कैसे बदलें?
Link का color बदलने के लिए color property का इस्तेमाल किया जाता है।
a {
color: blue;
}Output: Link blue color में दिखाई देगा।
CSS से Link की Underline कैसे हटाएं?
By default browser links को underline के साथ दिखाता है। इसे हटाने के लिए text-decoration: none; का उपयोग करें।
a {
color: blue;
text-decoration: none;
}Output: Link blue दिखाई देगा और उसके नीचे की underline हट जाएगी।
CSS में :hover से Link पर Hover Effect कैसे लगाएं?
:hover pseudo-class तब काम करती है जब mouse pointer link के ऊपर जाता है।
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}Output: Normal स्थिति में link blue रहेगा। Mouse link के ऊपर ले जाने पर link red हो जाएगा और underline दिखाई देगी।
:visited से Visited Link का Color कैसे बदलें?
अगर आप चाहते हैं कि user द्वारा visit किए जा चुके links का color अलग दिखाई दे, तो :visited का इस्तेमाल कर सकते हैं।
a:visited {
color: purple;
}Output: पहले visit किया गया link purple color में दिखाई दे सकता है।
:active से Active Link को Style कैसे करें?
जब user link पर click कर रहा होता है, तब :active state लागू की जा सकती है।
a:active {
color: orange;
}Output: Link पर click करते समय उसका color orange दिखाई देगा।
CSS Link में Background Color कैसे लगाएं?
Link को ज्यादा attractive बनाने के लिए background-color और padding का उपयोग किया जा सकता है।
a {
color: white;
background-color: blue;
padding: 10px 15px;
text-decoration: none;
}Output: Link blue background और white text के साथ दिखाई देगा।
CSS से Link को Button जैसा कैसे बनाएं?
CSS की मदद से normal text link को button जैसा बनाया जा सकता है।
a {
display: inline-block;
background-color: blue;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
a:hover {
background-color: darkblue;
}Output: Link एक button की तरह दिखाई देगा। Mouse hover करने पर उसका background color बदल जाएगा।
CSS Link का Complete Example
अब सभी मुख्य states को एक example में समझते हैं:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
}
</style>
</head>
<body>
<a href="https://www.example.com">Visit Website</a>
</body>
</html>Output
इस example में link की अलग-अलग स्थिति के अनुसार उसका color और appearance बदल जाएगा।
CSS Link को कब और कैसे Use करें?
- Navigation menu के links को style करने के लिए।
- Blog post के internal links को attractive बनाने के लिए।
- External links को अलग color देने के लिए।
- Call-to-action links को button जैसा बनाने के लिए।
- Hover effect देकर user experience बेहतर करने के लिए।
CSS Links से जुड़े जरूरी Points
<a>tag HTML में link बनाने के लिए इस्तेमाल होता है।colorसे link का text color बदला जा सकता है।text-decorationसे underline को control किया जा सकता है।:hovermouse hover effect के लिए उपयोगी है।:visitedvisited links को style करता है।:activeclick के समय link की styling के लिए उपयोग किया जाता है।
CSS Links FAQ
CSS में link का color कैसे बदलें?
Link का color बदलने के लिए color property का उपयोग करें। उदाहरण: a { color: blue; }
CSS में link की underline कैसे हटाएं?
text-decoration: none; का उपयोग करके link की underline हटाई जा सकती है।
CSS में hover effect क्या है?
जब mouse pointer किसी element के ऊपर जाता है, तब :hover pseudo-class के जरिए उसकी styling बदली जा सकती है।
क्या CSS से link को button बनाया जा सकता है?
हाँ। background-color, padding, border-radius, display और दूसरी CSS properties की मदद से link को button जैसा बनाया जा सकता है।
निष्कर्ष
CSS Links Property का इस्तेमाल करके आप अपनी website के links को simple text से लेकर attractive buttons तक कई तरीकों से style कर सकते हैं। :link, :visited, :hover और :active link states को समझना CSS सीखने के लिए महत्वपूर्ण है। अलग-अलग properties को combine करके आप अपनी website के design के अनुसार बेहतर link styles बना सकते हैं।
