CSS3 Links Creation and Usage
Links are very vital for any web page to navigate through the site and so is also with CSS3. In CSS3 it is possible to handle links even more powerful and effectively as it is possible to handle various states of links which are link, visited, hover, and active states. Also it is possible to create buttons and boundaries to links in CSS3 by using the features of CSS3 technology which gives the effect of button to links.
As explained above in CSS3 it is possible go handle various states of links which are link, visited, hover, and active states. Before going in depth of how to handle this in CSS3 it is first important to know what each of these states means. Let us see about each of these states in brief.
States of Link:
The states of link are link, visited, hover, and active states.
visited:
This refers to the state of the link after a link has been clicked.
hover:
This refers to the pre-state of the link or in other words the state when a mouse is paced over the link.
link:
The link state refers to the default state of the link.
active:
This refers to the state of the link just after link is being clicked.
The above all four states of link can be handled in CSS3 as needed by the user. But care must be taken by user to use them in proper order namely link followed by visited then hover followed by active that is in short form denoted as LVHA. If the above order is not followed then there would be confusion in the link states which would cause the links from not working. So user must take sufficient care in following the above order while designing links using CSS3.
The general syntax of the link property of CSS3 is as below:
A:link|visited|active|hover
which refers that the link property can take any of the four values link, visited, active or hover. All the four properties can take value as <style>.The style can be given as needed by user just like styling for normal texts. Let us see a small example to understand the above link state usage in CSS3 in brief. Let us define each link state with a separate color that is a unique color for denoting the default state of link and a separate color for denoting the mouse paced over a link, another unique color for representing the link being clicked and visited and then a color to denote the active state of link. This can be done collectively as below:
<style type="text/css">
A: link { text-decoration: none;color: #00e; }
A:visited { text-decoration: none;color: blue; }
A:hover { text-decoration: underline;color: #fff; }
A:active { text-decoration: none;color: red; }
</style>
In the above we see another style property mentioned as text-decoration. In the above example the hover alone has text-decoration value as underline and the rest has text-decoration value as none which depicts that the link becomes underlined only when mouse is placed over the link and remains as not underlined in other states.
It is also possible for creating color on background for the links created. The background color can be set as determined by user for each state of link.
For example:
<style type="text/css">
A: link { background: #CCFF00;text-decoration: none;color: #00e; }
A:visited {background: #ECEC00; text-decoration: none;color: blue; }
A:hover { background: #FFFF00;text-decoration: underline;color: #fff; }
A:active { background: #CCCC00;text-decoration: none;color: red; }
</style>
The above example would create a background color for each state of link as defined above.
Shorter representation:
Now let us see how to present the above format in a shorter format if some properties are common for certain link states.
First let us see an example to understand this concept in detail.
a:link {
color:red;
font-weight:bold;
text-decoration:underline;
}
a: visited {
color:blue;
font-weight: bold;
text-decoration:underline;
}
a: hover {
color:#ff00;
font-weight: bold;
text-decoration:none;
}
a:active{
color:#fff0;
font-weight: bold;
text-decoration:none;
}
In the above representation we find that all the states link, visited, hover and active has the propery
font-weight:bold;
as common and also the property
text-decoration:underline;
holds good for link and visited states and the property
text-decoration:none;
holds good for hover and active states respectively.
So we can combine the above common attributes and could make a shorter representation in CSS3.The above example would take a shorter representation in CSS3 as below:
a{
font-weight:bold;
text-decoration:underline;
}
a:link{
color:red;
}
a: visited {
color:blue;
}
a: hover {
color:#ff00;
text-decoration:none;
}
a:active{
color:#fff0;
text-decoration:none;
}
Use of Creating Links as Buttons:
As explained before it is possible to create buttons and boundaries to links in CSS3 by using the features of CSS3 technology which gives the effect of button to links. One might have a query of what is the use of making links as buttons when a user can normally place a button by using the concept of images as done in earlier versions. The main drawback associated with the earlier approach of placing button by using the concept of images is time factor. That is it takes much time for page to load which in turn decreases the performance. This drawback is removed by the concept of border style being used in links which gives a button effect to links and thereby making the time slice less and there by improving the performance.
