Tuesday, February 20, 2018

Links (Css tutorial)


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:

  • 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.
Usually, all theses properties are kept in the header part of the HTML document.
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:

<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

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.

<style type="text/css">
 a:link {color: #000000}
</style>

<a  href="/html/index.html">Black Link Example</a>

 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.

<style type="text/css">
 a:visited {color: #006600}
</style>

<a  href="/html/index.html">Visited Link Example</a>

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.

<style type="text/css">
 a:hover {color: #FFCC00}
</style>

<a  href="/html/index.html">Bring Mouse Here</a>

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.

<style type="text/css">
 a:active {color: #FF00CC}
</style>

<a  href="/html/index.html">Active Link Example</a>

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)
Share:

0 comments:

Post a Comment