How to Style Links in CSS at Blogger

 This chapter teaches you how to set different properties for a hyperlink using CSS. You are The following properties can be set for the hyperlink:

We will revisit the same properties when we discuss the Pseudo classes from 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, all of these properties are kept in the head 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 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.

How to Set the Color of Links

The following example shows how to set the link 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.htm">Black Link</a>

It will produce the following black link:

Black Link

How to Set the Color of Visited Links

The following example shows how to set the color of the links visited. Maybe

Values ​​can 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>

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

Click this link

Change the Color of Links when Mouse is Over

The following example shows how to change the color of the links when fetching

Mouse pointer over this link. Possible values ​​can be any color name in any valid

Form.

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

It will produce the following link. Now, bring your mouse over this link and you will do it We see that it changes its color to yellow.

Bring Mouse Here

How to Change the Color of Active Links

The following example shows how to change the color of active links. Maybe

Values ​​can 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>

It will produce the following link. It will change its color to pink when the user clicks it.

Click This Link

I hope you enjoy this post and the photos. How to Style Links in CSS at Blogger.