CSS हमें वांछित के रूप में लिंक को स्टाइल करने की अनुमति देता है। हम रंग, पृष्ठभूमि, आकार में वृद्धि आदि जोड़कर टेक्स्ट को प्रारूपित कर सकते हैं। इसके अलावा, एक सुखद दृश्य प्रभाव बनाने के लिए एनिमेशन को जोड़ा जा सकता है।
उचित कार्यक्षमता के लिए, छद्म चयनकर्ताओं का क्रम निम्नलिखित द्वारा दिया जाता है:- :लिंक, :विजिटेड, :होवर, :सक्रिय।
उदाहरण
निम्नलिखित उदाहरण CSS के साथ लिंक्स की स्टाइलिंग को स्पष्ट करते हैं -
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 25px;
}
#mod {
padding: 10px;
color: darkturquoise;
border: thin solid;
background-color: lemonchiffon;
}
#mod:hover {
color: white;
box-shadow: 0 0 0 1px black;
background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:user@example.com">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:user@example.com">Modified demo link</a>
</p>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
दूसरी कड़ी को मँडराने पर, हमें निम्नलिखित आउटपुट मिलते हैं -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
display: flex;
float: left;
border: thin solid;
background-color: snow;
padding: 20px;
}
body * {
border-radius: 5%;
}
#mod {
padding: 10px;
color: royalblue;
text-decoration: none;
}
#mod:hover {
box-shadow: 0 0 10px 2px black;
text-decoration: overline;
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">Demo</a></button>
<a id="mod" href="#">Demo</a>
</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
दूसरे लिंक को मँडराने पर, हमें निम्न आउटपुट मिलता है
