Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to use Different Properties of CSS Links

In this article I will cover the concept of applying CSS styles on HTML Links. I will discuss the different properties available with CSS links and also give some examples to explain the concept.

Introduction:

This tutorial will discuss concepts and methods to add CSS (cascading style sheet) styles in html links.

I already covered the pseudo classes in previous tutorial which had some idea about links and this tutorial will tell you how to use different styles with links. There are four states of links.

Here are the pseudo classes for the link element. Similar to pseudo class syntax, lets write CSS class for links also.

  • Link- A, link that has not been used, nor is a mouse pointer hovering over it.
  • Visited-A, link that has been used before, but has no mouse on it.
  • Hover- A, link currently has a mouse pointer hovering over it.
  • Active -A, link that is in the process of being clicked.

Defining Styles for Links:

The CSS links can be styled differently depending on the state they are in. Similar to the above pseudo-classes CSS links can also have a color and a background color, fonts, and text properties.Here you will see few examples on how CSS can be used to replace the traditional image of links when mouse is hovered over it. Following script will show you how to give style to a link.

Listing 1: Script to add overline and underline for links

<html>
<head>
<style type="text/css">
A:link {text-decoration: underline}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: overline; color:green}
</style>
</head>
<body>
<p><b><a href="#" target="_blank">Click/Point to see the Effects</a></b></p>
</body>
</html>
overline and underline properties for links

Figure 1: Above figure shows the output of overline and underline properties for links

The CSS links are generally used to remove underline on the particular link. In normal case its showing the underline and overline in case of mouse pointer hovers over the link. In above example we did just that. In addition we added a green color for hovered links.

Another example would be to create links that have a permanent background color, obviously standing out from the rest.

Listing 2: Links with different background color
<html>
<head>
<style type="text/css">
A:link {background: #FFCC00; text-decoration: none}
A:visited {background: #FFCC00; text-decoration: none}
A:active {background: #FFCC00; text-decoration: none}
A:hover {background: #FFCC00; font-weight:bold; color: green;}
</style>
</head>
<body>
<p><b><a href="#" target="_blank">Click/Point to see the Effects</a></b></p>
</body>
</html> 
output of background effect on links 1
output of background effect on links 2

Figure 2: Above figure display the output of background effect on links

Another example would be to create links that change in size when hovered.

Listing 3: Script of adding size variation on hovering the links

<html>
<head>
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:24; font-weight:bold; color: Green;}
</style>
</head>
<body>
<p><b><a href="#" target="_blank">Click/Point to see the Effects</a></b></p>
</body>
</html>
output of fond size effect on links 1
output of fond size effect on links 2

Figure 3:

Lastly, I will discuss the adding multiple link styles that can be used on the same page. Define a link style which is only active in certain areas of the page by addressing it while being dependent on a certain outer class that surrounds the area where we'd like our link style to be effective, instead of the A:link selector. Following example will compile the whole idea.

Listing 4: Complete link Script

<html>
<head>
<style type="text/css">
.class1 A:link {text-decoration:none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration:none}
.class1 A:hover {text-decoration: underline; color: red;background: #FFCC00; font-weight:bold}

.class2 A:link {text-decoration: underline overline}
.class2 A:visited {text-decoration: underline overline}
.class2 A:active {text-decoration: underline overline}
.class2 A:hover {text-decoration: underline; color: green;background: #FFCC00; font-weight:bold}
</style>
</head>

<body>
Example 1: links with some attribute 
<br>
<span class="class1">
<a href="http://www.facebook.com">Facebook Home page</a>
<br>
<a href="http://www.orkut.com">Orkut Home page</a>
</span>
<br>
<br>
Example 2: links with some attribute 
<br>
<span class="class2">
<a href="http://www.google.com">Google Home page</a>
<br>
<a href="http://www.rediffmail.com"> Rediffmail Home page</a>
</span>
</body>
</html>
links complete program

Figure 4: The above is the output of links complete program

Two avoid the extra effort to add style to each and every link in the area, we can define the entire area, the link style in this area will be same for all the links present here.

Conclusion:

This tutorial covered the basics of CSS styles related to links. Go through the programs and implement in your projects and let us know if you have any questions.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login