Achieving Active Link States with CSS

September 18th, 2008

Today we are going to talk about achieving active link states using CSS and a tiny little bit of HTML. The most popular use for active link states is to highlight the page you are currently viewing on your website.

For this example, let’s put together a super basic, 3-page website. Our page titles will be Home, About, and Contact. The first thing we need to do is set an ID for each of these pages in our CSS, see below:

#home {
}
#about {
}
#contact {
}

Our next step will be to setup an ID for the actual active link states. At the very minimum, all you need to do here is define the color that you would like the active link to be.

#home #home_on {
color: #c06;
}
#about #about_on {
color: #c06;
}
#contact #contact_on {
color: #c06;
}

Okay, that’s it for the CSS, let’s move onto the HTML. Open up your index.html page and insert the following code into your <body> tag:

<body id=”home”>

Now do the same thing for the about and contact page replacing home with the relevant ID for about and contact.

The final step is to insert your link ID into the link tag for each of your pages in your main navigation. That will look like this:

<a href=”index.html” id=”home_on”>
<a href=”about.html” id=”about_on”>
<a href=”contact.html” id=”contact_on>

That’s it, you’re done. Click the button below if you would like to download a copy of the source files for this tutorial.

donate

Tags: ,

Print This Post Print This Post

Photoshop to HTML Rockable Press
Theme Forest

Share this post

  • Twitter
  • Facebook
  • Delicious

Comments

Twitter Up Your Business
How to be a rockstar freelancer