CSS हमें लिंक्स को इच्छानुसार स्टाइल करने की अनुमति देता है। हम टेक्स्ट को फॉर्मेट कर सकते हैं, कलर, बैकग्राउंड जोड़ सकते हैं, साइज़ बढ़ा सकते हैं, आदि। इसके अलावा, विज़ुअल इफेक्ट बनाने के लिए एनिमेशन जोड़े जा सकते हैं।
उचित कार्यक्षमता के लिए, pseudo selectors का क्रम निम्न है: :link, :visited, :hover, :active।
उदाहरण
निम्नलिखित उदाहरण 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>आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरे लिंक पर होवर करने पर हमें निम्नलिखित आउटपुट मिलता है:
