Log in

View Full Version : Style Sheets in HTML

potski
Apr 29, 2007, 09:28 PM
Hello!

I have two sets of links inside my web page:

Link 1
Link 2
Link 3

Link A
Link B
Link C


When I put the mouse over Link 1-3, I'd like for it to change the font color to BLUE.
a:hover{text-decoration: color: #4040FF;}


For Link A-C, I'd like for it to change to RED when I put the mouse over it.
a:hover{text-decoration: color: #FF0000;}



I currently have this inside my <HEAD> tag:

<style type="text/css">
a{text-decoration: none;}
a:hover{text-decoration: underline; color: #4040FF;}
</style>

... but it affects the whole links inside my site. I want to be able to control the font color of
Each of my links once the mouse is placed over it.


If anyone can help me accomplish this, I'd really appreciate it.


Thanks,

Potski
Northwind_Dagas
Apr 30, 2007, 02:25 PM
You need to use some classes to differentiate between the two types of links.


Give the two link types some names. In this example, I will use "primary" for 1,2,3 and "secondary" for A,B,C.


<HEAD> tag:

<style type="text/css">
a{text-decoration: none;}
a:hover{text-decoration: underline; color: #4040FF;}
a.primary:hover{text-decoration: color: #4040FF;}
a.secondary:hover{text-decoration: color: #FF0000;}
</style>

Then, in your link codes:

<a href="link1.html" class="primary">Link 1</a>
<a href="link2.html" class="primary">Link 2</a>
<a href="link3.html" class="primary">Link 3</a>

<a href="linka.html" class="secondary">Link A</a>
<a href="linkb.html" class="secodnary">Link B</a>
<a href="linkc.html" class="secondary">Link C</a>


Remember that classes are case sensitive so if you use caps in the head, use them in the links as well. Good luck!
potski
Apr 30, 2007, 09:46 PM
You need to use some classes to differentiate between the two types of links.


Give the two link types some names. In this example, I will use "primary" for 1,2,3 and "secondary" for A,B,C.


<HEAD> tag:

<style type="text/css">
a{text-decoration: none;}
a:hover{text-decoration: underline; color: #4040FF;}
a.primary:hover{text-decoration: color: #4040FF;}
a.secondary:hover{text-decoration: color: #FF0000;}
</style>

Then, in your link codes:

<a href="link1.html" class="primary">Link 1</a>
<a href="link2.html" class="primary">Link 2</a>
<a href="link3.html" class="primary">Link 3</a>

<a href="linka.html" class="secondary">Link A</a>
<a href="linkb.html" class="secodnary">Link B</a>
<a href="linkc.html" class="secondary">Link C</a>


Remember that classes are case sensitive so if you use caps in the head, use them in the links as well. Good luck!



Hello. Thanks for replying. I tried the same codes you gave me, but it doesn't
Seem to work. I don't know what I'm doing wrong. Below is my actual HTML coding:

<html>

<head>

<style type="text/css">
a{text-decoration: none;}
a:hover{text-decoration: underline; color: #4040FF;}
a.primary:hover{text-decoration: color: #808080;}
a.secondary:hover{text-decoration: color: #FF0000;}
</style>

</head>

<body link="green" vlink="green" alink="green">

<a href="link1.html" class="primary">Link 1</a> <br>
<a href="link2.html" class="primary">Link 2</a> <br>
<a href="link3.html" class="primary">Link 3</a>

<br><br><br>

<a href="linka.html" class="secondary">Link A</a> <br>
<a href="linkb.html" class="secondary">Link B</a> <br>
<a href="linkc.html" class="secondary">Link C</a>

</body>
</html>

... it only follows the first hover line "a:hover{text-decoration: underline; color: #4040FF;}"
I hope you can help me out and point out what I did wrong.


Thanks,

Potski
Northwind_Dagas
May 1, 2007, 09:07 PM
It would seem that I carried over a mistake from your original code. In the following two lines:
a.primary:hover{text-decoration: color: #808080;}
a.secondary:hover{text-decoration: color: #FF0000;}
There is a text-decoration: statement with no declaration. If you want a text decoration, such as underline, you must add it after the satement, as well as a semicolon. If you do not want anything other than the color change on hover, replace those two lines with these:
a.primary:hover{color: #808080;}
a.secondary:hover{color: #FF0000;}


Good luck!
potski
May 1, 2007, 10:21 PM
It would seem that I carried over a mistake from your original code. In the folowing two lines:
a.primary:hover{text-decoration: color: #808080;}
a.secondary:hover{text-decoration: color: #FF0000;}
There is a text-decoration: statement with no declaration. If you want a text decoration, such as underline, you must add it after the satement, as well as a semicolon. If you do not want anything other than the color change on hover, replace those two lines with these:
a.primary:hover{color: #808080;}
a.secondary:hover{color: #FF0000;}


Good luck!



It works now :) Thank you so much!
You've been a great help!

Regards,

Potski