CSS LINKS

The links that we use in HTML can be styled and effects can be added on these links using CSS. We can add many properties to links such as color, background, text-decoration, etc.
For example,

a{ color: blue;}

Normally a link can exist in four states and these states are:
– a:hover – it means a link when the user mouse over it with a pointing device. This hover effect will not occur on touch screen devices because the screen will not know whether anyone is hovering over the element.
– a:link – it is an unvisited link
– a:visited – it is the link that the user has visited.
– a:active – it is the active link means that the user has clicked on it just now or the button is being pressed.
Based on these four states, we can apply different CSS properties to different states. For example, let us apply the color property to the hover state. It is applied as,

a:hover { color: red;}

Similar to this, the color property can be applied to the other three states as well. Also, we can apply other CSS properties to these links such as background-color. It can be written as,

a:link{ background-color: grey;}

We can also use the text-decoration property to remove the underline from links. If we do not use this property then, by default, the links will be underlined. Example,

a:link{ text-decoration: none;}

We can combine several other CSS properties to display links as boxes. These properties include color, background-color, padding, text-align, text-decoration, etc.