Highlight Current Page in an HTML Document Using CSS

When designing a web page using HTML/CSS you might have notice that you cannot have an active page just by creating a new index file. In this tutorial I will teach you the simple steps to creating an active CSS state. Open your favorite WYSIWYG (Dreamweaver, coda, notepad++) editor.

Getting an active state when using css can be very frustrating if you’re not that familiar with css. Many developers that are new to css often think it is the end of the world when really the active state can be accomplish with very little code.

The Body

The body is of the most important roles when you’re trying to create an active page using css. The reason the body tag is very important because when its time to define what page the user is on the body tag will keep that page active. You’re probably thinking that just body tag can complete that and truth is it can but with a little bit of help from an id or class tag. to give the body a id or class name you would simply do the following.


Everytime you create a new index page make sure you change the body class or id name and you will later know why.


For the HTML I created/ a basic navigation menu with and unique id name. Notice every link such as home, about, etc all have different id names. The reason they all have different id names is so we can identify that certain linktag in the css file.


Ok so you now have and idea of how the menu has to be laid out using html. Now its time to define each id element from the html. If you look at the code below
you will notice that every css tag has the body id, followed by the menu id with the a(active) tag and finished with the css properties. Take a look at css and compare it to the html.

This was not a tutorial but I truly hope it helped you guys out. I know many people face this problem quite often and do not know what to do. It was a simple, fast, and sweet technique.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. Steve says:

    Another way you can accomplish this would to utilize the class attribute. This can be accomplished by creating a class of active (class=”active”) to the active page. Since classes are reusable, you can apply them to as many pages as you want.

    you’ll get the same effect and less writing.

  2. I do much the same thing but with a different method. Instead of having a different ID (or class) for each page (each body tag) I use a "current" class for each button I want to show is current. This means the CSS can be as simple as:
    li.current {
    The advantage is I do not need to alter my CSS for every page I add – just add the current class to any li I want to show is the current page. The HTML looks like this:
    <div id="nav">
               <li class="current"><a href="index.html">Home</a></li>
               <li><a href="about.html">About</a></li>
               <li><a href="team.html">Team</a></li>
               <li><a href="video.html">Video</a></li>
               <li><a href="contact.html">Contact</a></li>
    This is also less work for each navigation section – no need to add IDs (or classes) to every li. You can also easily have multiple items show as current, which is useful for when you have a hierarchical menu system.

    • Marcell says:

      Great method Michael. I’ve tried the current class with css but did not have luck. Maybe I did something wrong but will give it a try again. I know the li.current works with wordpress though.

  3. Jeranon says:

    I agree w/ Steve, however, since you’re only ever using it once on a page, you can use either “class” or “id”.
    It’s an easier way to code it, but, very creative method you’ve come up w/!
    One other thing, Notepad++ isn’t a wysiwyg… 😀

  4. Robert Anthony says:

    I found this tip immensely useful, and can totally relate to the “end of the world feeling” I had prior to reading this . I DO have a question about menus that include sub sections that also require being highlighted as active.
    Can you have multiple ID’s in a body tag to establish both the parent and sub menu items as being active?

Leave a Reply