TabNavigator containers come with a handful of styles that allow you to customize the appearance of the tabs:

tabStyleName

Name of CSS style declaration that specifies styles for the tabs. The default value is undefined.

firstTabStyleName

Name of CSS style
declaration that specifies styles for the first tab. If this is
unspecified, the default value of the tabStyleName style property is
used.

lastTabStyleName

Name of CSS style
declaration that specifies styles for the last tab. If this is
unspecified, the default value of the tabStyleName style property is
used.

selectedTabTextStyleName

Name of CSS style declaration that specifies styles for the text of the selected tab.

But sadly, you cannot easily specify a CSS style declaration for the
selected tab. You can only specify a style for the text of the selected
tab. This sucks.

Luckily, there is a better way to customize the appearance of the
tabs, without being constrained or limited by the styles mentioned
above. You can skin them!. In the CSS for your application, create a
new style declaration for your tabs. Then define values for any or all
of the skin properties: skin, disabledSkin, downSkin, overSkin, upSkin,
selectedDisabledSkin, selectedDownSkin, selectedOverSkin,
selectedUpSkin.

Now this is where it gets beautiful. The values you specify for the
skin properties can point to custom components OR embeddable assets!
You can use ClassReference() to specify custom components and Embed()
to specify custom assets like images or SWFs.What’s great about this
solution is that you can also use the standard TabNavigator styles in
tandem with the custom skins.

This means you can skin the tab backgrounds with a GradientCanvas
container, for example, and use the tabStyleName and
selectedTabTextStyleName styles to customize the tab fonts!

Update: I’ve posted sample code below that uses a Canvas container
and some basic black-and-white styles to demonstrate how this works!

Sample code for the custom styles:

.tab
{
up-skin: ClassReference(”TabSkin”);
down-skin: ClassReference(”TabSkin”);
over-skin: ClassReference(”TabSkin”);

selected-up-skin: ClassReference(”SelectedTabSkin”);
selected-down-skin: ClassReference(”SelectedTabSkin”);
selected-over-skin: ClassReference(”SelectedTabSkin”);

background-color: #FFFFFF;

font-weight: normal;
color: #000000;
text-roll-over-color: #000000;

corner-radius: 0;

border-style: solid;
border-thickness: 1;
border-color: #000000;
}

.selectedTab
{
background-color: #000000;

font-weight: bold;
color: #FFFFFF;
text-roll-over-color: #FFFFFF;

corner-radius: 0;

border-style: solid;
border-thickness: 1;
border-color: #000000;
}

Sample code for the tab skins:

package
{
import mx.containers.Canvas;

public class TabSkin extends Canvas
{
override protected function updateDisplayList
(w : Number, h : Number) : void
{
this.styleName = “tab”;

super.updateDisplayList (w, h);
}

}
}

package
{
import mx.containers.Canvas;

public class SelectedTabSkin extends Canvas
{
override protected function updateDisplayList
(w : Number, h : Number) : void
{
this.styleName = “selectedTab”;

super.updateDisplayList (w, h);
}

}
}

Sample code for the TabNavigator container:

<mx:TabNavigator id=”tabs”
tabStyleName=”tab” selectedTabTextStyleName=”selectedTab” />