- 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 different states of a link using CSS
Using CSS pseudo selectors, namely, :active, :hover, :link and :visited, we can style different states of a link. For proper functionality, the order of these selectors is given by:- :link, :visited, :hover, :active.
Syntax
The syntax of CSS text-indent property is as follows −
a:(pseudo-selector) { /*declarations*/ }
The following are some key Pseudo-classes for links −
:active = To select the active link
:hover = To select links on mouse over
:hover = To select links on mouse over
:valid = To select elements with a valid value
:visited = To select all visited links
The following examples illustrate the styling of different states of a link −
Set the states of a link
The different states of a link are set here using the pseudo classes −
a:link { color: navy; text-decoration: none; } a:visited { color: yellowgreen; } a:hover { color: orange; text-decoration: wavy underline; } a:active { color: red; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> div { margin-left: 20px; display: flex; float: left; } a:link { color: navy; text-decoration: none; } a:visited { color: yellowgreen; } a:hover { color: orange; text-decoration: wavy underline; } a:active { color: red; } </style> </head> <body> <div> <div> <a href="#">Demo link </a> </div> <div> <a href="">Demo visited link</a> </div> </div> </body> </html>
Set the states of a link and change the shadow
The link states are used to change the element’s shadow on an active link and when it is hovered −
a:hover { color: orange; font-size: 150%; font-weight: bold; box-shadow: 0 0 5px 1px grey; } a:active { color: red; box-shadow: inset 0 0 15px red; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> div { display: flex; float: left; } a { margin: 20px; padding: 10px; border: 2px solid black; text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black; font-size: 1.1em; } a:link { text-decoration: none; } a:visited { color: blueviolet; } a:hover { color: orange; font-size: 150%; font-weight: bold; box-shadow: 0 0 5px 1px grey; } a:active { color: red; box-shadow: inset 0 0 15px red; } </style> </head> <body> <div> <a href="#">Kapow!</a> <a href="">Dishoom</a> </div> </body> </html>