Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

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

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>

Credits

I originally read about this technique in the Simplebits notebook.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me