CSS Links

Links वह तरीका हैं जिनसे visitors web पर घूमते हैं, इसलिए वे कैसे दिखते और behave करते हैं यह किसी भी दूसरे element से कहीं ज़्यादा मायने रखता है। CSS links को कई अलग states देता है जिन्हें आप अलग-अलग style कर सकते हैं, इस आधार पर कि किसी भी समय उस link के साथ exactly क्या हो रहा है। एक link unvisited, पहले से visited, mouse से hovered, actively clicked, या keyboard से focused हो सकता है, और CSS के पास हर एक के लिए एक pseudo-class selector है: :link, :visited, :hover, :active, और :focus। इन states को सोच-समझकर style करना visitors को इंटरैक्ट करते समय साफ़, संतोषजनक feedback देता है। Links को plain underlined text जैसा दिखना ज़रूरी नहीं, थोड़ी CSS के साथ इन्हें cookiescursor.com जैसी site पर buttons जैसा दिखने और महसूस होने के लिए style किया जा सकता है।

In this page:

Link States: hover, visited, active, focus
सही Pseudo-Class Order
Hover पर Underline
Links को Buttons की तरह Style करना
Links पर Accessible Focus Styles

Syntax

css

a:link { property: value; }
a:visited { property: value; }
a:hover { property: value; }
a:active { property: value; }

Link States: hover, visited, active, focus

CSS pseudo-classes आपको किसी link को उसकी current state के आधार पर target करने देते हैं: :hover जब कोई mouse उसके ऊपर बैठा हो, :visited एक बार जब कोई visitor पहले उसे click कर चुका हो, :active click करने के exact moment के दौरान, और :focus जब उसे keyboard से select किया गया हो।

Note: छोटे state changes भी, जैसे hover पर थोड़ा अलग color, visitors को यह विश्वास दिलाते हैं कि page उन्हें respond कर रहा है।

Warning: Browsers privacy कारणों से :visited links पर आप कितनी style लगा सकते हैं इसे सीमित करते हैं (मुख्य रूप से सिर्फ color), ताकि sites browsing history detect न कर सकें।

उदाहरण: Link States: hover, visited, active, focus

css

<style>
a:hover { color: red; }
a:visited { color: purple; }
a:active { color: orange; }
a:focus { outline: 2px solid blue; }
</style>
<a href="#">Interactive link</a>

सही Pseudo-Class Order

क्योंकि CSS बराबर specificity होने पर बाद वाले rules को पहले वाले rules पर लागू करता है, link pseudo-classes को एक साथ सही तरीके से काम करने के लिए एक specific order में लिखना ज़रूरी है: :link, :visited, :hover, फिर :active।

Note: Order याद रखने के लिए 'LoVe HAte' mnemonic इस्तेमाल करें: link, visited, hover, active।

Warning: :visited से पहले :hover लिखना किसी visited link पर hover style को असल में कभी न दिखने का कारण बन सकता है, क्योंकि :visited इसे आगे override कर देगा।

उदाहरण: The Correct Pseudo-Class Order

css

<style>
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
</style>
<a href="#">LVHA order: link, visited, hover, active</a>

Hover पर Underline

एक common, subtle pattern है links को default रूप से बिना underline के रखना, फिर सिर्फ hover पर एक दिखाना, जो सामान्य पढ़ने को cluttered किए बिना interactivity का एक संतोषजनक हिस्सा देता है।

Note: यह pattern navigation links के लिए खासतौर पर अच्छा काम करता है, जहाँ एक साफ़ look मायने रखता है लेकिन hover feedback फिर भी उम्मीद की जाती है।

Warning: अगर आप default underline को पूरी तरह हटा दें और hover state भी skip कर दें, तो links plain text से अलग पहचानना genuinely मुश्किल हो सकता है।

उदाहरण: Underline on Hover

css

<style>
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
</style>
<a href="#">Underline appears only on hover</a>

Links को Buttons की तरह Style करना

किसी link को plain text जैसा दिखना ज़रूरी नहीं, background, padding, और border-radius जोड़ना इसे एक असली button जैसा दिखा और महसूस करा सकता है, जबकि यह अंदर से फिर भी एक normal link की तरह ही behave करता है।

Note: Button-styled links primary calls to action के लिए बहुत अच्छे हैं, जैसे 'Get Started' या Download, जहाँ आप चाहते हैं कि वे visually अलग दिखें।

Warning: एक button की तरह style किया गया link फिर भी link की तरह behave करना चाहिए (href से कहीं navigate करे), किसी button-triggered action को link की तरह disguise न करें।

उदाहरण: Styling Links as Buttons

css

<style>
a.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
}
</style>
<a href="#" class="button">Get Started</a>

Links पर Accessible Focus Styles

buttons और inputs की तरह ही, links को keyboard से focus होने पर एक साफ़ visible style चाहिए, ताकि page में tab करता हुआ कोई व्यक्ति हमेशा बता सके कि इस समय कौन-सा link selected है।

Note: किसी link की :focus style को कम से कम उसकी :hover style जितना visible design करें, keyboard users भी उतना ही साफ़ feedback पाने के हकदार हैं।

Warning: Custom :focus style दिए बिना links पर outline हटाना keyboard users को यह देखने का कोई तरीका नहीं छोड़ता कि इस समय कौन-सा link selected है।

उदाहरण: Accessible Focus Styles on Links

css

<style>
a:focus {
  outline: 3px solid orange;
  outline-offset: 2px;
}
</style>
<a href="#">Tab to me to see a clear focus style</a>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Icons Next Lesson → CSS Lists