Free CSS3 Tutorial – How to change link color in html

Posted on by

आज के इस Free CSS3 tutorial के लेख मे हम सीखेंगे की HTML Web page पर link का color कैसे change करते है | (How to change link color in html )

HTML Hyperlink की total चार position होती है , और हम इन चारो properties का color, css की help से change कर के देखेंगे |

  • a:link : यह unvisited Hyperlink को दर्शाता है |
  • a:visited : यह visited Hyperlink को दर्शाता है |
  • a:hover : यह mouse pointer जिस link पर currently लगा हुआ हो उस link को दर्शाता है |
  • a:active : यह user currently जिस link पर click किया हुआ है , उस link को दर्शाता है |

आप अपनी पसंद के अनुसार किसी भी CSS properties जैसे कि color, font, background, border आदि को इन selectors पर लागू कर सकते हैं ताकि link की style को customize किया जा सके, ठीक वैसे ही जैसे आप normal text के साथ करते हैं।

Example

a:link {    /* unvisited hyperlink */
    color: #f70404;
    text-decoration: none;
    border-bottom: 2px solid;
}
a:visited {    /* visited hyperlink */
    color: #ee02ee;
}
a:hover {    /* mouse over hyperlink */
    color: #04ec04;
    border-bottom: none;
}
a:active {    /* active hyperlink */
    color: #04f2f2;
}

link की अलग-अलग अवस्थाओं के लिए style style set करने का क्रम (sequence) महत्वपूर्ण है, क्योंकि जो style सबसे आखिर में लिखी जाती है , उस style को css में ज्यादा importancy दी जाती है |

link के style के मामले में, यह नियम क्रम (sequence) से काम करता है। मान लीजिए आपने a:link को नीला (blue) रंग दिया है और बाद में आपने a को लाल (red) रंग दिया है। ऐसे में, ब्राउज़र आखिरी नियम को मानेगा और link का color read हो जाएगा।

Contents hide
1 Modifying Default Link Styles
2 Hyperlink का custom color set कैसे करे? How to change link color in html
3 How to Remove the Default Underline from Links in HTML
4 How to make Text Links Look Like Buttons in CSS – Links ko buttons ke jesa kese banaye?

Modifying Default Link Styles

All major web browsers जैसे कि Chrome, Firefox, Safari, आदि में, web pages में यदि हम hyperlink पर style set नहीं करते है तो वह hyperlink अपने default color और underline के साथ dispaly होती है |

ज्यादा तर web brousers में text link कुछ इस प्रकार by default दिखाई देती है |

  • एक अनविज़िटेड लिंक (unvisited link) नीले रंग (blue) के अंडरलाइन टेक्स्ट के रूप में दिखता है। For example – This is unvisited link
  • एक विज़िटेड लिंक (visited link) बैंगनी रंग (purple) के अंडरलाइन टेक्स्ट के रूप में दिखता है। For example – This is visited link
  • एक एक्टिव लिंक (active link) लाल रंग (red) के अंडरलाइन टेक्स्ट के रूप में दिखता है। For example – This is active link

By default hover की स्थिति में link के स्वरूप में कोई बदलाव नहीं होता है। यह जिस भी स्थिति (यानी, unvisited, visited या active) में होता है, उसी के आधार पर blue, purple या red ही रहता है।

चलिए अब देखते हैं कि hyperlink की default style को overriding करके उन्हें कैसे customize किया जाता है।

Hyperlink का custom color set कैसे करे? How to change link color in html

चलिए आज के How to change link color in html के topic में hyperlink में default color कैसे change करते है वह समझते है |

अलग-अलग link state के लिए अपनी पसंद का color set करने के लिए simple बस CSS color property का उपयोग करें। लेकिन ध्यान रहे की color चुनते समय, यह सुनिश्चित करें कि user normal text और link के बीच स्पष्ट रूप से अंतर पता कर सके।

यह समझने के लिए कि यह मूल रूप से कैसे काम करता है, उसके लिए निम्नलिखित उदाहरण को देखे |

a:link {
    color: #14b29a;
}
a:visited {
    color: #de03d5;
}
a:hover {
    color: #9853f4;
}
a:active {
    color: #f09002;
}

ऊपर दिए गए उदाहरण में हमने css की color property का use कर के visited hyperlink, unvisited hyperlink, hover hyperlink और active hyperlink का default color change किया है |

How to Remove the Default Underline from Links in HTML

चलिए अब हम How to change link color in html के topic में hyperlink की default underline को कैसे remove करते है ( How to remove the Default Underline from Linkes in HTML) , यह समझते है |

अगर आपको link पर default underline पसंद नहीं है, तो आप इसे हटाने के लिए बस CSS में text-decoration प्रॉपर्टी का उपयोग कर सकते हैं। इसके अलावा, आप link को normal text से थोड़ा अलग दिखाने के लिए उस पर अन्य styling भी लगा सकते हैं, जैसे कि background color, bottom border ya bold font आदि।

निचे दिया गया उदाहरण दिखाता है कि किसी लिंक की अलग-अलग अवस्थाओं (states) के लिए अंडरलाइन को कैसे रिमूव करना या सेट करना है।

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of How to Remove the Default Underline from Links in HTML</title>
<style>            
    a:link, a:visited {
        text-decoration: none;
    }
    a:hover, a:active {
        text-decoration: underline;
    }
</style>
</head>
<body>
    <p><a class="hclcolor" href="#">Place mouse pointer here</a></p>
</body>
</html>

Output

Place mouse pointer here

How to make Text Links Look Like Buttons in CSS – Links ko buttons ke jesa kese banaye?

चलिए अब हम How to change link color in html के topic में Links ko buttons ke jesa kese banaye ( How to make Text Links Look Like Buttons ) वह सीखते है |

आप अपने normal text link को CSS का उपयोग करके button जैसा भी दिखा सकते हैं। ऐसा करने के लिए हमें कुछ और CSS properties का उपयोग करना होगा, जैसे कि background-color, border, display, padding आदि। आप इन css properties के बारे में upcoming chapters में विस्तार से जानेंगे।

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to make Text Links Look Like Buttons</title>
<style>            
    a:link, a:visited {
        color: white;
        background-color: #11ceb1;
        display: inline-block;
        padding: 9px 18px;
        border: 2px solid #078b77;
        text-decoration: none;
        text-align: center;
        font: 13px Arial, sans-serif;
    }
    a:hover, a:active {
        background-color: #9055e1;
        border-color: #6531aa;
    }
</style>
</head>
<body>
    <p><a href="#">This is exmple of css link button</a></p>
</body>
</html>

Output

This is exmple of css link button

यह भी पढ़े :-