help with links (css type stuff)

[Tool is God]

Hi,

I want to make it so that when someone puts their mouse over a link it changes the color and underlines it...however, the problem I have is that I use SSI, so how do I go about doing this? should I put the style sheets in the main page where all the pages are linked together, or should I put it on each page that I want to have separate colors? because not all the links can be the same color and change to the same color...so how do I do it that it changes to a color that I specify, and preferably how do I make it so that I can control the colors of each link? confusing? yes. sorry about it, but I dunno how ot explain it. Thanks.

 

[lord_andy]

I think this might help you.

To get the same type of things to do different things you need to set classes.
eg.

on the main page you would put something like:

p.joke{font-size: 12pt; line-height: 12pt; font-family: 'Comic Sans MS'; font-color: #BBBBBB;}
p.girls{font-size: 10pt; line-height: 16pt; font-family: Verdana; font-color: #FFFFFF;}
p.boys{font-size: 12pt; line-height: 12pt; font-family: 'arial'; font-color: #3592hh;}
etc...

later on, on your page you would write something like:
<p class="joke">mmvjksehfiuahf</p>
<p class="girls">Suck that</p>

Get what i mean????

 

[meow]

On each page or in a separate Style Sheet. Embedded CSS is only good for the document it's contained in, so putting it only on the main page won't work. I don't see how SSI affects this though?

 

[polestar]

SSI has nothing to do with this.

You can have just one style sheet for all your pages.

Call it styles.css, put it in the same directory as the page and put this in the header of your html page:

<LINK href="styles.css" rel=STYLESHEET type=text/css>

-----------------------------------

In styles.css, type this:

A.one:link {color: #0000ff; text-decoration: none}
A.one:visited {color: #000099; text-decoration: none}
A.one:active {color: #ff0000; text-decoration: none}
A.one:hover {color: #00ff00}

A.two:link {color: red; text-decoration: none}
A.two:visited {color: blue; text-decoration: none}
A.two:active {color: purple; text-decoration: none}
A.two:hover {color: black}

set the colours to whatever you want.

Then in your html page, type

<a href="http://www.yahoo.com class=one>One kind of link</a>

<a href="http://www.yahoo.com class=two>Second kind of link</a>

You can have as many different classes as you like.

There are lots of other parameters available too, besides the color and underline which you asked for. You can really make your html pages shorter (so loading faster) if you make good use of css.

Good Luck!

 

[lucifer]

Originally posted by polestar
<a href="http://www.yahoo.com" class=one>One kind of link</a>

<a href="http://www.yahoo.com" class=two>Second kind of link</a>

 

[polestar]