Don't be stingy, Share this post with others!

• Tweet
• Bookmark this!

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.

body id="home">

or

body class="home">

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

The HTML

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.

<div id="menu-nav">
	<ul>
		<li id="home"><a href="index.html">Home</a></li>
		<li id="about"><a href="about.html">About</a></li>
		<li id="team"><a href="team.html">Team</a></li>
		<li id="video"><a href="video.html">Video</a></li>
		<li id="contact"><a href="contact.html">Contact</a></li>
	</ul>
</div><!--end menu-nav-->

The CSS

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.

body#home #home a,
body#about #about a,
body#team #team a,
body#video #video a,
body#contact #contact a{
	padding:10px;
	background:#FF0000;
	margin-right:5px;
	color:#FFFF00;
	text-decoration:none;
}

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.

Don't be stingy, Share this post with others!

• Tweet
• Bookmark this!

active page css, Css, css active, css active page tutorial, css highlight current page, current, current page highlight tutorial, highlight, highlight page css, menu, Tutorial.

10 Responses to Highlight Current Page in an HTML Document Using CSS

1. Pingback: Highlight Current Page in an HTML Document Using Css | Webdevtuts | CSS Guru How to CSS


2. January 19, 2010 at 1:25 pm kelvinwebdesigner

   Nice!
   Keep writing, I think you articles are very basic but helpfull.
   CG

3. February 20, 2010 at 9:16 am Steve

   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.

4. November 12, 2010 at 12:44 pm Michael Glasser

   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 {
        padding:10px;
        background:#FF0000;
        margin-right:5px;
        color:#FFFF00;
        text-decoration:none;
   }
   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">
         <ul>
              <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>
              </ul>
   </div>
   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.
   
   • November 15, 2010 at 3:49 pm Marcell

     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.

5. November 13, 2010 at 8:20 pm Jeranon

   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…

6. February 27, 2011 at 9:55 pm nicky

   this helped me so much! thanks!
   
   • February 27, 2011 at 10:15 pm Marcell

     No problem! Glad it helped

7. March 30, 2011 at 11:12 am Robert Anthony

   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?
   
   • April 1, 2011 at 6:25 pm Marcell

     I don’t think you can have sub item highlighted. Ive seen it done using a cms but not plain css