Two types of style for A tag

[Tonz]

Can I define two different types of style in the anchor tag.

I have a menu with small text and links with - in the main text that I want to make look different.

Here is the code...

<style type="text/css">
<!--
.text {font-family: sans-serif; color: #666666
}

body {font-family: sans-serif; color: #ccffff; size: 10pt
}

A {

color: #99cc99;
letter-spacing: normal;
font-family: arial;
font-weight: normal;
font-variant: normal;
font-size: 9pt;
font-style: normal;
text-decoration: none;
text-transform: capitalize;
}

A:hover {

color: red;
letter-spacing: normal;
font-family: arial;
font-weight: normal;
font-variant: normal;
font-size: 9pt;
font-style: normal;
text-decoration: underline;
text-transform: capitalize;
}



-->
</style>



How do i get the links in the main body of the text to look different to the above style please.


Thanx in advance,

Tonz:cool:

[boxer_1]

You could use a 'class' selector. Here's an example:

<style type="text/css">
A.reg:link {
font-family: "Arial";
color: #ffff00;
font-weight: 600;
font-size: 12pt;
text-decoration: none;
}

A.reg:visited {
font-size: 12pt;
font-family: "Arial";
color: #ffff00;
font-weight: 700;
text-decoration: none;
}

A.reg:hover {
font-size: 12pt;
font-family: "Arial";
color: #ff0000;
font-weight: 700;
text-decoration: underline;
}

A.reg:active {
font-size: 12pt;
font-family: "Arial";
color: #ff0000;
font-weight: 700;
text-decoration: underline;
}

A.bl:link {
font-family: "Arial";
color: #ffff00;
font-weight: 700;
font-size: 16pt;
text-decoration: none;
}

A.bl:visited: {
font-family: "Arial";
color: #ffff00;
font-weight: 700;
font-size: 16pt;
text-decoration: none;
}

A.bl:hover {
font-family: "Arial";
color: #ff0000;
font-weight: 700;
font-size: 16pt;
background-color: #0000ff;
text-decoration: underline;
}

A.bl:active {
font-family: "Arial";
color: #ff0000;
font-weight: 700;
font-size: 16pt;
text-decoration: none;
}
</style>

Then, in you set your links up like this:

<a class="reg".....>

<a class="bl"........>

The link with the "reg" class will inherit the style set for that class and the one with the 'bl' class will be displayed with the style defined with the A.bl:... class.

Is this what you were asking?

[IBM]

This might help out a little, the previous post pretty much got it though.
CSS TUTE (http://desciple5.netfirms.com/pseudo2.html)

[Tonz]

Many thanks boxer.

I tried class, but I obviously got the syntax wrong, I will try it out and let you know how I got on.

Thanks again

Tonz:cool:

[boxer_1]

Originally posted by Tonz
Many thanks boxer.

I tried class, but I obviously got the syntax wrong, I will try it out and let you know how I got on.

Thanks again

Tonz:cool:

You're welcome! My example may look a bit code heavy / exssesive, but it's best to define the style of your links in all states (ie: link, visited, hover, active) to achieve consistant results. The rest, such as font-weight, font-family, font-size, is just there to show that you have the option to manipulate these attributes in the various states of your links. Putting it all in external style sheets, you can add the css to all of you pages with one line, as opposed to pasting the whole code one each individual page ;).