Default color of a link is blue. But it doesn't look so nice, when we are not using a simple theme.
In style of a site, everything must be in a proper color contrast.
The links' color can also be changes to whatever we want.
To do so, first of all we should know the states of a link on a page.
I mean, if we put some link on a page, First of all it is, A normal unvisited link.
When we click on a link, in becomes active. And after visiting that link, it becomes a visited link.
By default in HTML the default colors of different color states are:
 |
blue - a normal unvisited link |
 |
red - an active link (when we click on a link) |
 |
purple - a visited link |
But it's not all in all. We can change these color and style of the links to whatever we want.
Just you should know how to select the states of a link in CSS.
The link states are:
- a:link - a normal, unvisited link
- a:visited - a link that user has visited
- a:hover - a link when the user mouses over it
- a:active - a link the moment it is clicked
Have a look on the following example:
While designing the links for several states, there are some order rules:
- a:hover must come after a:link and a:visited
- a:active must come after a:hover
Common Link Styles:
Let's have a look on some of the following examples.
These are the CSS codes to design the links.
Text Decoration
Text decoration is used to remove/add the underline effect or style into some link.
The code below will remove the underline from all of the links.
Example: http://css3wdesign.net16.net/text-decoration.html
Background Color
This property is used to change the background color of a text.
More Advance Examples
This example demonstrates how to add different styles to the hyperlinks.
Advanced: Creating Link Boxes with CSS
This example is one of the advanced. In this example we will demonstrate how to change the links to look like boxes using different CS properties.
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.