CSS
In this tutorial we will learn about CSS Link styling property.
We use the anchor tag a to create links in HTML.
a
We can style a link with most of the CSS properties like color, font-size, font-family, background-color etc.
color
font-size
font-family
background-color
There are 4 important states of a link and it can be in any one of the state.
We use the above states of the link to style it. We use these states as pseudo class.
In the following example we have set the color of link to blue if it is in :link state i.e., unvisited.
:link
a:link { color : blue; }
In the following example we have set the color of link to red if it is in :visited state.
:visited
a:visited { color : red; }
In the following example we have set the color of link to green if it is in :hover state i.e., the mouse is hovering over the link.
:hover
a:hover { color : green; }
In the following example we have set the color of link to yellow if it is in :active state i.e., the moment when the link is getting clicked.
:active
a:active { color : yellow; }
By default, each link regardless of its state will have underline with color matching the link text.
To style this we use the text-decoration property. It takes any one of the following value.
text-decoration
In the following example we have set the text-decoration to none.
a { color : blue; font-size : 120%; text-decoration : none; }
In the following example we have set the text-decoration to overline.
a { color : blue; font-size : 120%; text-decoration : overline; }
In the following example we have set the text-decoration to line-through.
a { color : blue; font-size : 120%; text-decoration : line-through; }
In the following example we have set the text-decoration to blink.
a { color : blue; font-size : 120%; text-decoration : blink; }