New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom CSS Classes

  • Overview
  • Attractions
  • Location
  • Calendar
  • Price
Overview
Attractions
Location
Calendar
Price

RadTabStrip allows you to control the appearance of the tabs. Thus, you can make the look and feel of each tab unique.
This example shows how the CssClass , HoveredCssClass and SelectedCssClass properties of the tabs can be used to make the appearance of each tab unique.

  • DefaultCS.aspx
  • styles.css
<%@ Page AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" SelectedIndex="1"
            EnableEmbeddedSkins="false" Skin="" MultiPageID="RadMultiPage1">
            <Tabs>
                <telerik:RadTab Text="Overview" CssClass="tab overviewTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
                <telerik:RadTab Text="Attractions" CssClass="tab attractionsTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
                <telerik:RadTab Text="Location" CssClass="tab locationTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
                <telerik:RadTab Text="Calendar" CssClass="tab calendarTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
                <telerik:RadTab Text="Price" CssClass="tab priceTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>

        <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="1">
            <telerik:RadPageView runat="server" ID="RadPageView1">
                <img src="Images/01.Overview.png" alt="Overview" />
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView2">
                <img src="Images/02.Attractions.png" alt="Attractions" />
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView3">
                <img src="Images/03.Location.png" alt="Location" />
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView4">
                <img src="Images/04.Calendar.png" alt="Calendar" />
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView5">
                <img src="Images/05.Price.png" alt="Price" />
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance