Topic: Simple CSS Problem (Page 1 of 1)

Hey geniuses... quick question:
I haven't been working with my sites to much lately and I can't seem to figure out the answer to this problem.
I want to assign my menu a certain link characteristic (size, color, align, etc) and I'm using a:link and it's associated
others to do so. How would I set up specific link styles for different sections of my site?

For example, My menu has a dark blue fade so I want the main menu navigation to be white so it's easy to see.
In my content, the general area is white so I want the links there to be dk. blue,
And in another section of content the bg is light grey so I like a light blue link style there.

I'm sure this is an easy fix but I can't figure it out.

Suggestions? TIA!

here's an example style using a menu div with an unordered list of links

a /* default link style */

{

color:#1C5E96;

text-decoration:none;

}



a:hover /* default link hover style */

{

color:#2586d7;

text-decoration:underline;

}



#menu li a /* link in a li that is in a div with the id menu */

{

color: #ffffff;

text-decoration: none;

}



#menu li a:hover /* link:hover in a li that is in a div with the id menu*/

{

color: #F7AF69;

text-decoration: none;

}

and the div

<div id="menu">

<ul>

  <li><a href="#">link</a></li>

  <li><a href="#">link2</a></li>

</ul>

</div>

Take a look at css2 selectors

[This message has been edited by ninmonkey (edited 12-05-2003).]

You could also assign classes to the links and define the appropriate rules for each class.

To give different styles to links in different areas of your page, you'll need to use the class attribute in the HTML and the appropriate selectors in the CSS.
For example, consider the following HTML:

<!-- links in menu -->

    <a class=menulink href=...>....</a>

    <a class=menulink href=...>....</a>



    <!-- links in content area -->

    <a class=contentlink href=...>...</a>

    <a class=contentlink href=...>...</a>



    <!-- links in other area -->

    <a class=otherlink href=...>...</a>

    <a class=otherlink href=...>...</a>

You could style these links as follows in your stylesheet:

a#menulink:link {

     color: #ffffff;

}



a#contentlink:link {

     color: #004400;

}



a#otherlink:link {

     color: #00cc00;

}



/*  add definitions for a#menulink:hover, etc. */