This page demonstrates a pure CSS method to generate a 'Tab' style interface (see here for more). It first uses the trick of an inline list to generate the tabs. To get the tabs to really look the part - the 'active' tab needs to blend into the 'content' area. This is achieved by giving the active tab a different class, and changing its properties (border-bottom and background) accordingly. Additionally, it allows one to change the active tab's :hover by not highlighting the active tab in the same way as the inactive tabs.

Because the purpose of the tab interface is to 'guide' the user as to their present location, these small features do actually improve the 'usability' of the tab structure. Try clicking on each tab to see it in action...

The code is very simple, the CSS is embedded to let you see 'under the hood'. Most of the action occurs in the list styling. If the tabs don't 'align' properly to the top of the box, alter the font-size and line-height of the li element to suit. Changing font will require finding the 'sweet' spot at which different browsers render identically.