Click here for Demo

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.