Setting the CSS Class of Tabs

RadTab objects have a number of properties whose value is the name of a CSS class. These properties let you alter the appearance of individual tabs in the tab strip without using a custom skin.

Typically, the Skin overrides the CSS class properties. When using the CSS class properties, set the Skin property to an empty string ("").

The CSS class properties are

  • CssClass: controls the appearance of the tab in all states.

  • SelectedCssClass: controls the appearance of the tab when it is selected.

  • DisabledCssClass: controls the appearance of the tab when it is disabled.

  • HoveredCssClass: controls the appearance of the tab when the mouse is over it.

  • ChildGroupCssClass: controls the appearance of the set of child tabs that appear when the tab is selected.

  • OuterCssClass: controls the appearance of the outmost tab wrapper (<LI> element) /added in Q2 2009 SP1/

To set the CSS class properties of an item at design time, use the RadTabStrip Item Builder.

The CSS class of a tab is applied to the anchor (<a>) tag that represents the item in the rendered HTML output, except for the ChildGroupCssClass property, which is applied to an unordered list (

Defining the CSS Class

There are two ways you can define the CSS classes that you add using the CSS class properties:

  • You can use a separate CSS file. When taking this approach, you must add a tag to the section of the ASPX file:
<head runat="server">
  <title>Untitled Page</title>
  <link href="App_Data/MyStyles.css" rel="stylesheet" type="text/css" />
</head>         
  • You can define the styles directly in the section of the ASPX file:
<head runat="server">
<title>Untitled Page</title>
<style>    
.MyTab
{
     background:url(Images/TabImage.gif) no-repeat 0 100%;
     padding-left:5px;
}
</style>
</head> 

See Also

In this article
Not finding the help you need? Improve this article