Cascading Style Sheets or CSS is a style sheet language that defines how HTML elements are to be displayed. It was developed to separate the content from the design. This way, it enables you to alter the layout and appearance of one or more web pages in your website by editing just one single file. It also allows you to change web page content without changing the layout, colors and fonts. It thus provides more flexibility and control in content presentation and reduces repetition of processes.

Aside from being flexible, CSS improves search engine results. Search engine spiders can go directly to the content because it has been separated from the design. Sites with CSS also load faster and can be displayed on various media like the printer and PDA.

Simple Explanation:

1. Add a class to each Body tag on each page you want to style the 'current' links for.
2. Add a class to the list items that contain your links on each page you want to style the current links.
3. There is no step 3.
4. I forgot testing, test it.
5. Now, if you're like me - go back and fix the typo's that are messing everything up...
6. Re-test
7. Okay, that's 6 steps instead of 2. But if you're good, it should be 2...

What we're effectively doing here is creating an 'AND' logic gate in our Cascading Style Sheet for each page. I think.

Yep, that means as many extra lines of code in your css as you have pages. But don't worry, it's a copy/paste job, then amend a little.

The logic, if I have it right, is something like this:

IF page Class = "current", AND list item Class = "current" THEN

Set style as bold, white, no underline

ELSE Do F.A.

ENDIF

Method: Add a class to the Body tag of each page:

(tags removed - just add in the relevant opening & closing tag brackets)

body class="home"

body class="about"

Then add a class to each li tag in your list menu:

div id="links"

li class="first" a href="index.html" Home /a /li

li class="second" a href="about.html" Home /a /li

The CSS goes like this:

body.home #links li.first {font-style:bold;colour:FFF;text-decoration:none}

Or whatever styling you'd like for the current page.

Now the link on your home page should be white, with no underline, and bold.

Rinse and repeat for your other pages, ie:

body.about #links li.second{ font-style:bold;colour:FFF;text-decoration:none}

You are the man here, you tell the CSS which page's (about, or home) body Class, and which Link's Class should get the styling. Simple if you don't have too many Bud's and it's 3am.

Of course, you may opt to choose jQuery or other client side scripting, server-side script, or Spry if you use Dreamweaver.

That's your shout.