CSS Tabs 2.0

Update: (29 Jan 13) While these CSS tabs were once a great example of CSS in practice, they’ve become sorely outdated. I strongly recommend using the excellent tabs in frameworks such as Bootstrap or Foundation instead.

My goal was to build CSS tabs without using any images or hacks and with as little CSS as possible.

CSS Tabs

See CSS Tabs in action. (View source for HTML and CSS.)

(Updated 10 February 2007) CSS Tabs has been tested in:

  • Windows
    • Internet Explorer (6.0, 7.0)
    • Mozilla (1.1, 1.2, 1.3, 1.4, 1.5, 1.6)
    • Firefox (1, 1.5, 2.0)
    • Opera (8.5, 9.0)
    • Netscape (6.2, 7.2)
  • Mac
    • Safari (1, 1.1, 1.2, 1.3, 2.0)
    • Camino (0.7, 0.8, 0.9, 1.0)
    • Opera (8.5, 9.0)
    • Mozilla (1.1, 1.4, 1.5, 1.6, 1.7)
    • Firefox (1.0, 1.5, 2.0)
    • Netscape (7.0, 7.2)
  • Linux
    • Firefox (1.5, 2.0)
    • Konqueror 3.40
    • Mozilla (1.1, 1.3, 1.4, 1.5, 1.6, 1.7)
    • Opera 9.0
    • Netscape 7.0
Neat things about these tabs:
  • They don’t use any images.
  • They don’t use any CSS or HTML hacks.
  • They use very little CSS.
  • They can be placed anywhere on a page.
  • The HTML doesn’t need to change between pages because the CSS uses the body id to determine the active tab.

Please note: I’m no longer working on CSS Tabs. Your feedback is appreciated, but I won’t update the HTML or CSS. If you have problems using CSS Tabs, please consult one of the many CSS Tutorials available.

Related blog posts:

Translations of this page: