Web | This Site

CSS Beginners
CSS Advanced
CSS References
CSS Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# CSS - Links

This tutorial will teach you how to set different properties of a hyper link using CSS. You can set following properties of a hyper link:

We will revisit same properties when we will discuss Pseudo-Classes of CSS.

- The :link Signifies unvisited hyperlinks.

- The :visited Signifies visited hyperlinks.

- The :hover Signifies an element that currently has the user's mouse pointer hovering over it.

- The :active Signifies an element on which the user is currently clicking.

Usually these all properties are kept in the header part of 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 definition 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.

# Set the color of Links:

Following is the example which demonstrates how to set the link color. Possible value could be any color name in any valid format.

    <style type="text/css">
    a:link {color:#000000}
    </style>
    <a href="/html/index.htm">Black Link</a>

This will produce following black link:

Black Link

# Set the color of Visited Links:

Following is the example which demonstrates how to set the color of visited links. Possible value could be any color name in any valid format.

    <style type="text/css">
    a:visited {color: #006600}
    </style>
    <a href="/html/index.htm">Click this link</a>

This will produce following link. Once you will click this link, it will change its color to green.

Click this link

# Change the color of links when mouse is over:

Following is the example which demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format.

    <style type="text/css">
    a:hover {color: #FFCC00}
    </style>
    <a href="/html/index.htm">Bring Mouse Here</a>

This will produce following link. Now you bring your mouse over this link and you will see that it changes its color to yellow.

Bring Mouse Here

# Change the color of active links:

Following is the example which demonstrates how to change the color of active links. Possible value could be any color name in any valid format.

    <style type="text/css">
    a:active {color: #FF00CC}
    </style>
    <a href="/html/index.htm">Click This Link</a>

This will produce following link. This will change it color to pink when user clicks it.

Click This Link

Advertisement

Online Image Processing

Indian Baby Names