CSS Links
The browsers
tend to appear links in blue with an underline by default, and they
will change the color of links that have been gone to assist clients to
know which pages they have been to.
In CSS, there
are two pseudo-classes that permit you to set distinctive styles
for joins that have and have not however been gone by.
- :link used to
set styles for links that have not however been gone by.
- :visited used
to set styles for links that have been clicked.
Links can be
styled in different ways.
Styling Links
Links can be
styled with any CSS properly. Like color, font-family, background, etc.).
Special for links is that they can be styled differently depending on their
state.
The four links state
are:
| Property | Description |
| a:link | a normal, unvisited link. |
| a:visited | a link the user has visited. |
| a:hover | a link when the user mouses over it. |
a:active | a link the moment it is clicked. |
When seeing the
style for several link states, there are some order rules:
a:
active must come after a: hover
a:
hover must come after a: link and a: visited.
Common Link
Styles
- Color
The link text
change color depending on what state.
Example
a:hover{color: #007bb5;}
a:link{color: #bb0000;}
a:visited{color: #125688;}
a:active{color: #55acee;}
- Text Decoration
The
text-decoration property is mostly used to remove underlines from the links.
Example
a:hover{text-decoration: none;}
a:link{text-decoration: none;}
a:visited{text-decoration: underline;}
a:active{text-decoration: underline;}
- Background
Color
The
background-color property specifies the background color from the links.
Example
a:hover{background-color: #125688;}
a:link{background-color: #09bef0;}
a:visited{background-color:#bb0000;}
a:active{background-color:#3b5998 ;}
Leave a comment
No Cmomments yet