Evening.

I'm coding some CSS by hand, which is something I haven't attempted since about 2004, and I'm having trouble getting the result I'm after.

I'd like to have a navigation menu on the left and main content on the right of the screen.

The left nav' bar has a dark background and requires white text, while the main content has a white background and requires black text. I'd like the links to follow that pattern.

I've written the CSS as I think I used to which is:


a.nav:link {color:white; text-decoration:none;}
a.nav:visited {color:white; text-decoration:none}
a.nav:hover {color:white; text-decoration:none;}

a.main:link {color:black; text-decoration:none;}
a.main:visited {color:black; text-decoration:none}
a.main:hover {color:black; text-decoration:none;}

If memory serves correctly, all I need to do is the class name in to specify which hyperlink style to use in each section?

 

Yep, that should work OK.

In the left just class your links thus:

<a class="nav" href="target">link</a>

and in the right;

<a class="main" href="target">link</a>

You might want to make your CSS look like this to include active links just to be sure:

a.nav:link {color:white; text-decoration:none;}
a.nav:active {color:white; text-decoration:none;}
a.nav:visited {color:white; text-decoration:none;}
a.nav:hover {color:white; text-decoration:none;}

a.main:link {color:black; text-decoration:none;}
a.main:active {color:black; text-decoration:none;}
a.main:visited {color:black; text-decoration:none;}
a.main:hover {color:black; text-decoration:none;}

 

Working nicely, thanks.