Styling the Tabs widget

Using Firebug for Firefox (or another generic DOM explorer), we can see that a variety of class names are added to the different underlying HTML elements. Let's review these class names briefly and see how they contribute to the overall appearance of the widget. To the outer container <div>, the following class names are added:

Class name	Purpose
ui-tabs	Allows tab-specific structural CSS to be applied.
ui-widget	Sets generic font styles that are inherited by nested elements.
ui-widget-content	Provides theme-specific styles.
ui-corner-all	Applies rounded corners to the container.

The first element within the container is the <ul> element. This element receives the following class names:

Class name	Purpose
ui-tabs-nav	Allows tab-specific structural CSS to be applied.
ui-helper-reset	Neutralizes browser-specific styles applied to <ul> elements.
ui-helper-clearfi	Applies the clear-fix, as this element has children that...