- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Styling Links Working with CSS
CSS allows us to style links as desired. We can format text, by adding colors, background, increase size, etc. Furthermore, animations can be added to create a pleasant visual effect.
For proper functionality, the order of pseudo selectors is given by:- :link, :visited, :hover, :active.
Example
The following examples illustrate styling of links with 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>
Output
This gives the following output −
On hovering the second link, we get the following output −
Example
<!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>
Output
This gives the following output −
On hovering the second link, we get the following output
Advertisements