Hello guys! evening and welcome to this section of my Tutorial on CSS, in my last tutorial post i talked about CSS Images. Now i want to talk about CSS Links.
This section of my tutorial on CSS teaches you how to set different properties of a hyper link using CSS. You can set the following properties of a hyper link:
Remember a:hover must come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active must come after a:hover in CSS definitions as follows:
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
Now, we will see how to use these properties to give different effects to hyperlinks.
You can also read: Inclusion (Css tutorial)
Set the Color of Links
The following example shows how to set the hyperlink color. Possible values could be any color name in any valid format.
a:link {color: #000000}
Black Link Example
You can also read: Backgrounds (Css tutorial)
Set the Color of Visited Links
The following example shows how to set the color of a visited link. Possible values could be any color name in any valid format.
a:visited {color: #006600}
Visited Link Example
Change the Color of Links when Mouse is over
The following example shows how to change the color of links when we bring a mouse pointer over the link. Possible values could be any color name in any valid format.
a:hover {color: #FFCC00}
Bring Mouse Here
Change the Color of Active Links
The following example shows how to set the color of an active link. Possible values could be any color name in any valid format.
a:active {color: #FF00CC}
Active Link Example
Alright guys! that's it for this tutorial on CSS Links. Feel free to drop your questions on the comment box below, they will be attended to as soon as possible. Also like our facebook page and subscribe to our email news letter.
See you guys in my next tutorial, bye for now.
Links to previous tutorials on CSS : Css Introduction (Css tutorial) , Syntax (Css tutorial) , Inclusion (Css tutorial) , Css Measurement Units (Css tutorial) , Backgrounds (Css tutorial) , Fonts (Css tutorial) , Text (Css tutorial) , Images (Css tutorial)
This section of my tutorial on CSS teaches you how to set different properties of a hyper link using CSS. You can set the following properties of a hyper link:
- The :link specifies unvisited hyperlinks.
- The :visited specifies visited hyperlinks.
- The :hover specifies an element that currently has the user's mouse pointer hovering over it.
- The :active specifies an element on which the user is currently clicking.
Remember a:hover must come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active must come after a:hover in CSS definitions as follows:
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
Now, we will see how to use these properties to give different effects to hyperlinks.
You can also read: Inclusion (Css tutorial)
Set the Color of Links
The following example shows how to set the hyperlink color. Possible values could be any color name in any valid format.
a:link {color: #000000}
Black Link Example
You can also read: Backgrounds (Css tutorial)
Set the Color of Visited Links
The following example shows how to set the color of a visited link. Possible values could be any color name in any valid format.
a:visited {color: #006600}
Visited Link Example
Change the Color of Links when Mouse is over
The following example shows how to change the color of links when we bring a mouse pointer over the link. Possible values could be any color name in any valid format.
a:hover {color: #FFCC00}
Bring Mouse Here
Change the Color of Active Links
The following example shows how to set the color of an active link. Possible values could be any color name in any valid format.
a:active {color: #FF00CC}
Active Link Example
Alright guys! that's it for this tutorial on CSS Links. Feel free to drop your questions on the comment box below, they will be attended to as soon as possible. Also like our facebook page and subscribe to our email news letter.
See you guys in my next tutorial, bye for now.
Links to previous tutorials on CSS : Css Introduction (Css tutorial) , Syntax (Css tutorial) , Inclusion (Css tutorial) , Css Measurement Units (Css tutorial) , Backgrounds (Css tutorial) , Fonts (Css tutorial) , Text (Css tutorial) , Images (Css tutorial)
