CSS - Fantastic Tabs

Last Update: 8.5.2010

Introduction

This X/HTML and CSS technique differentiates the current page from others in a navigation bar, using a single stylesheet and no need for any server side code. I like this technique because it's both very simple and very robust, and the basic premise can be used to great effect.

Demonstration
The Code
Credits

Demonstration

In the iframe below, "Home", "About" and "Contact" are different pages, each sharing the same CSS file. Click the different tabs and note that the current tab remains highlighted during navigation.

Code

This effect relies on one simple trick: each page is identified an id attribute on its body element and each tab is also identified with an id attribute. CSS overrides the default tab styling when a specific tab exists inside a specific body element:

<style type="text/css">
body#home #tab-home a, body#about #tab-about a, body#contact #tab-contact a {
  color: #000000;
  background-color: #FFFFFF;
}
</style>