सीएसएस के साथ लिंक को स्टाइल करने के लिए, सबसे पहले हमें निम्नलिखित लिंक राज्यों को जानना चाहिए:लिंक, विज़िट, होवर और सक्रिय। लिंक को स्टाइल करने के लिए एंकर एलिमेंट के छद्म वर्गों का उपयोग करें -
a:link for link a:visited forvisited link a:link for hover on link a:active for active link
उदाहरण
आइए अब एक उदाहरण देखें -
<!DOCTYPE html> <html> <head> <style> a:link { color: orange; text-decoration: underline; } a:hover { color: red; text-decoration: underline; } a:active { color: green; text-decoration: underline; } </style> </head> <body> <h1>Tutorials</h1> <p><a href="https://www.tutorialspoint.com/java">Java</a></p> <p><a href="https://www.tutorialspoint.com/chsharp">C#</a></p> <p><a href="https://www.tutorialspoint.com/jquery">jQuery</a></p> <p><a href="https://www.tutorialspoint.com/ruby">Ruby</a></p> <p><a href="https://www.tutorialspoint.com/pytorch">PyTorch</a></p> </body> </html>
आउटपुट
उदाहरण
आइए अब एक और उदाहरण देखें -
<!DOCTYPE html> <html> <head> <style> a:link { color: blue; text-decoration: none; } a:hover { color: blue; text-decoration: none; } a:active { color: blue; text-decoration: none; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is the <a href="https://tutorialspoint.com">reference</a></p> </div> </body> </html>
आउटपुट