First, let’s start with some example nav code:

<ul>
<li><a class="home" href="/">Home</a></li>
<li><a class="about" href="/about/">About us</a></li>
<li><a class="contact" href="/contact/">Contact us</a></li>
</ul>

The important thing to note is that each nav item has it’s own distinct class. After you’ve given each nav item a class, move on to your body tag.

For the body tag on each page, give it an id that matches the class name you gave that page in the nav. (So, the body tag for “About Us” would have an id of “about” and so on.)

Last, make a CSS rule to make the magic happen…

<code>#home .home, #about .about, #about .about, #contact .contact
 {
 text-decoration: underline;
 }

Obviously, you would make the CSS rule do whatever it is you actually need to happen – but hopefully you get the idea. When the nav class and the body id coincide for any item, that rule takes effect.