HTML Link Colors

Default Unvisited Link

:link pseudo-class उस anchor element को target करता है जिसे user ने अभी तक visit नहीं किया है, और यह वह state है जिसमें ज़्यादातर links default रूप से होते हैं।

anchor tag को सीधे style करने के बजाय :link का उपयोग करने से आप सिर्फ unvisited links को visited links से अलग target कर सकते हैं।

उदाहरण: The Default Unvisited Link

In this preview, the link hasn't been visited, so it renders in the color set by a:link (blue by default) until it's clicked.

<style>
  a:link {
    color: blue;
  }
</style>
<a href="page.html">Unvisited link</a>

Visited Links को Mark करना

:visited उन links को target करता है जिन्हें ब्राउज़र पहचानता है कि user पहले click कर चुका है, जिससे आप "read" links को "unread" वालों से अलग कर सकते हैं, आमतौर पर visited search results या wiki links को gray out करने के लिए उपयोग होता है।

उदाहरण: Marking Visited Links

This purple color only appears after a link has actually been clicked and visited — in a fresh preview like this one, the link still shows its unvisited (:link) color until you click it.

<style>
  a:visited {
    color: purple;
  }
</style>
<a href="page.html">Visited link</a>

Hover पर Highlight करना

:hover उस पल styles apply करता है जब mouse pointer किसी link के ऊपर जाता है, और pointer के हटते ही यह गायब हो जाता है, जिससे users को click करने से पहले ही तुरंत visual feedback मिलता है कि कोई element interactive है।

उदाहरण: Highlighting on Hover

<style>
  a:hover {
    color: red;
  }
</style>
<a href="page.html">Hover over me</a>

Active Click Moment को Style करना

:active सिर्फ उस छोटे पल के दौरान apply होता है जब किसी link को actively दबाया जा रहा होता है, mouse-down और mouse-up के बीच, जो एक physical button की तरह ही यह tactile visual feedback देता है कि click register हो गया।

उदाहरण: Styling the Active Click Moment

<style>
  a:active {
    color: orange;
  }
</style>
<a href="page.html">Click and hold me</a>

Custom Link Themes

चारों pseudo-classes को combine करके आप एक पूरी तरह custom link theme बना सकते हैं जो ब्राउज़र की default blue-purple scheme पर निर्भर रहने के बजाय आपकी site के design से मेल खाती है, और साथ ही users की अपेक्षित underlying behavioral feedback को भी बनाए रखती है।

उदाहरण: Custom Link Themes

<style>
  a:link { color: teal; }
  a:visited { color: gray; }
  a:hover { color: coral; }
  a:active { color: darkred; }
</style>
<a href="page.html">Themed link</a>