Friday 28 June 2013

How to Apply different color links on the same page

05:08 By , No comments

In this section i discuss how to apply different color links on same page ,default color of a link is blue for all links. So we can apply different color using css property ,It is very easy to implement in your web page .just set a class name to your  hyperlinks ie <a> and write the css  based on your  requirements.
for example : I have a 2 links Link1 and link2  link 1 to be  red color and link2 to be green color , So i have declare 2 css property for the link1 and link 2 (ie redcss and greencss) The full code given below :

Normal HTML code: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>css link</title>
</head>
<body>
<a href="http://www.google.com" class="greencss">Google.com</a>
<a href="http://dreamtheweb.com.com" class="redcss">DreamtheWeb.com</a>
</body>
</html>
CSS section
a.redcss {color:red;}
a.redcss:link  {text-decoration: none; color: red;}
a.redcss:visited {text-decoration: none; color: red;}
a.redcss:hover {text-decoration: underline; color: red;}
a.redcss:active {text-decoration: none; color: red;}
a.greencss {color:blue;}
a.greencss:link {text-decoration: none; color:green;}
a.greencss:visited {text-decoration: none; color: green;}
a.greencss:hover {text-decoration: underline; color: green;}
a.greencss:active {text-decoration: none; color: green;}
View RESULT

0 comments:

Post a Comment