HTML Links – Different Colors

HTML में links के अलग-अलग states होते हैं और हर state का color अलग हो सकता है।
Browser by default कुछ colors assign करता है, लेकिन CSS की मदद से हम इन्हें पूरी तरह customize कर सकते हैं।

HTML Link States क्या होते हैं?

HTML link चार मुख्य states में होता है:

  1. Normal (Unvisited Link)
  2. Visited Link
  3. Hover Link
  4. Active Link

हर state के लिए अलग color सेट किया जा सकता है।

Default HTML Link Colors

जब कोई CSS apply नहीं होती, तब browser ये default colors दिखाता है:

Link StateDefault Color
UnvisitedBlue
VisitedPurple
HoverBlue + Underline
ActiveRed

ये colors browser और device के अनुसार थोड़ा बदल सकते हैं।

CSS से Link Colors कैसे बदलें

HTML links का color बदलने के लिए CSS pseudo-classes का उपयोग किया जाता है।

Basic Syntax

<style>
a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: green;
}

a:active {
  color: red;
}
</style>

Example: Different Colors for All Link States

<!DOCTYPE html>
<html>
<head>
  <title>HTML Link Colors</title>
  <style>
    a:link {
      color: #0066cc;
      text-decoration: none;
    }

    a:visited {
      color: #663399;
    }

    a:hover {
      color: #ff6600;
      text-decoration: underline;
    }

    a:active {
      color: #cc0000;
    }
  </style>
</head>
<body>

<a href="#">HTML Link Colors Example</a>

</body>
</html>

Pseudo-Classes का सही Order

CSS में link pseudo-classes का order बहुत important होता है।
गलत order होने पर styles काम नहीं करेंगे।

Correct Order Rule

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

Shortcut याद रखने के लिए: LVHA (Link, Visited, Hover, Active)

Hover Color का Practical Use

Hover color user को ये बताने के लिए होता है कि link clickable है।

<style>
a:hover {
  color: darkorange;
  background-color: #f2f2f2;
}
</style>

Real websites में hover effect UX के लिए बहुत जरूरी होता है।

Active Link Color क्या होता है?

जब user link पर click करता है और mouse button दबा रहता है, उस समय link active state में होता है।

<style>
a:active {
  color: black;
  background-color: yellow;
}
</style>

Visited Link Color का Control

Visited links का color user को बताता है कि कौन सा page पहले देखा जा चुका है।

<style>
a:visited {
  color: gray;
}
</style>

Security reasons की वजह से modern browsers visited links पर limited CSS ही allow करते हैं।

Different Color Links (Class Based)

अगर सभी links का color same नहीं चाहिए, तो CSS class का उपयोग करें।

<style>
.red-link {
  color: red;
}

.green-link {
  color: green;
}
</style>

<a href="#" class="red-link">Red Link</a><br>
<a href="#" class="green-link">Green Link</a>

Navigation Menu में Link Colors

<style>
nav a {
  color: white;
  padding: 10px;
  text-decoration: none;
}

nav a:hover {
  background-color: #333;
}
</style>

<nav style="background:black;">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Navigation menus में link colors consistency के साथ design किए जाते हैं।

Accessibility और Link Colors

Link colors हमेशा background से clearly visible होने चाहिए।

Good Practice:

  • Light background → Dark link color
  • Dark background → Light link color

Underline हटाने पर hover या color change जरूर रखें।

Common Mistakes

  • Hover और visited colors same रखना
  • Pseudo-classes का order गलत रखना
  • Background और link color में contrast कम होना

Summary

HTML links के अलग-अलग colors user experience को बेहतर बनाते हैं।
CSS pseudo-classes की मदद से हर link state को control किया जा सकता है।
Correct order और proper contrast professional websites के लिए जरूरी होता है।

Share your love

Related Posts