Tuesday, February 20, 2018

Css Links



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 discuss about the 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 these 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 the 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.

RECOMMENDED: Css Inclusion

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.

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

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

RECOMMENDED: Css Background

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.

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

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

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.

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

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

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.

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

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

Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about CSS Tables.

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.