CSS Links

हर वेबसाइट में links (a टैग) सबसे common element होते हैं, क्योंकि इन्हीं से यूजर एक पेज से दूसरे पेज पर जाता है। लेकिन अगर links simple blue underline वाले ही रह गए तो वेबसाइट boring लगेगी! तो इस लेसन में हम सीखेंगे — कैसे CSS के ज़रिए links को style, color, hover effects और transitions के साथ professional look दिया जाता है।

CSS Links (हाइपरलिंक को स्टाइल करना)

HTML में लिंक बनाने के लिए <a> टैग का उपयोग होता है। जैसे

<a href="https://example.com">Visit Example</a>

ब्राउज़र इसे default style में नीले रंग और underline के साथ दिखाता है। लेकिन CSS से हम इसे अपनी वेबसाइट के design के हिसाब से बदल सकते हैं।

Link के 4 स्टेट्स (States)

एक <a> टैग के चार main states होते हैं, जिन्हें हम अलग-अलग style कर सकते हैं

State (अवस्था)	CSS Selector	Description (विवरण)
🔹 Normal (सामान्य)	a:link	जब link पर अभी click नहीं किया गया
🔹 Visited (विजिटेड)	a:visited	जब link पहले visit किया गया हो
🔹 Hover (होवर)	a:hover	जब mouse link पर लाया जाए
🔹 Active (एक्टिव)	a:active	जब link पर click किया जा रहा हो

Example – Basic Link Styling

<style>
a:link {
  color: #0077cc;
  text-decoration: none;
}

a:visited {
  color: #551a8b;
}

a:hover {
  color: orange;
  text-decoration: underline;
}

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

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>

Explanation:

a:link → Normal links के लिए
a:visited → पहले से खोले गए links के लिए
a:hover → जब user cursor लाता है
a:active → जब क्लिक किया जा रहा होता है

Important Rule: सही Order में लिखना याद रखें!

CSS link states को हमेशा इसी क्रम में लिखें

a:link
a:visited
a:hover
a:active

क्योंकि अगर order गलत हुआ तो कुछ effects काम नहीं करेंगे।

Stylish Example – Hover Animation के साथ

<style>
.btn-link {
  color: #fff;
  background: #0077cc;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.btn-link:hover {
  background: #005fa3;
  transform: scale(1.05);
}
</style>

<a href="#" class="btn-link">Read More</a>

Result: एक सुंदर button-style link जो hover पर zoom हो जाता है

Example – Navigation Menu Links

<style>
nav {
  background: #f5f5f5;
  padding: 10px;
  display: flex;
  gap: 20px;
}

nav a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

nav a:hover {
  color: #0077cc;
  border-bottom: 2px solid #0077cc;
  padding-bottom: 2px;
}
</style>

<nav>
  <a href="#">Home</a>
  <a href="#">Services</a>
  <a href="#">Portfolio</a>
  <a href="#">Contact</a>
</nav>

यह navigation bar responsive और modern लगेगा।

Example – Underline Animation Effect

<style>
.cool-link {
  position: relative;
  text-decoration: none;
  color: #0077cc;
  font-size: 18px;
  font-weight: bold;
}

.cool-link::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0077cc;
  transition: 0.3s;
}

.cool-link:hover::after {
  width: 100%;
}
</style>

<a href="#" class="cool-link">Learn CSS</a>

Result: hover पर underline animate होती है — बहुत modern look देता है!

Text Decoration Control

CSS में link का underline हटाने या जोड़ने के लिए property होती है:

<style>
a {
  text-decoration: none; /* underline हटाने के लिए */
}

a:hover {
  text-decoration: underline; /* hover पर दिखाने के लिए */
}
</style>

Colorful Links Example

<style>
a {
  color: #008000;
}

a:hover {
  color: #ff6600;
}

a:visited {
  color: #800080;
}

a:active {
  color: #ff0000;
}
</style>

Tip: Hover color हमेशा bright और noticeable रखें ताकि user को interaction का feel मिले।

Buttons की तरह Links

<style>
.btn {
  background-color: #28a745;
  color: white;
  padding: 10px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s;
}

.btn:hover {
  background-color: #218838;
}
</style>

<a href="#" class="btn">Buy Now</a>

यह link बिल्कुल button की तरह behave करेगा।

Common Mistakes

❌ underline हटाना भूल जाना → messy look
✅ text-decoration: none; use करें
❌ link hover color बहुत हल्का रखना
✅ bright या contrasting color चुनें
❌ order mix करना (hover पहले लिख देना)
✅ हमेशा LVHA order रखें: link → visited → hover → active

Quick Recap

चयनकर्ता (Selector)	विवरण (Description)	उदाहरण (Example)
`a:link`	सामान्य, अप्रदर्शित (unvisited) लिंक	डिफ़ॉल्ट रंग (Default color)
`a:visited`	प्रदर्शित (visited) लिंक	अलग रंग (Different color)
`a:hover`	माउस होवर पर (On mouse hover)	हाइलाइट किया गया रंग (Highlighted color)
`a:active`	क्लिक पर (On click)	छोटा सक्रिय रंग (Short active color)

Practice Task

एक navigation bar बनाइए जिसमें चार links हों: Home, About, Services, Contact.
Hover करने पर underline animated हो
Background हल्का grey हो
Links blue color में हों
Click करते ही color red दिखे

Final Thoughts

CSS links आपकी वेबसाइट के interaction और style का base होते हैं। सही color, hover effects, और animation से ही एक link professional और clickable लगता है। तो हमेशा अपने links को attention देने लायक बनाइए