How to Include two different css styles in a single tab strip component

[Arjun_KT]

Hello SDN,

I have two Tab strip components in design studio,1st tab strip I want to apply two different css styles and in 2nd tab strip I want to keep default css.

To achieve this I created two different css styles for first and second tab strips and calls them respectively.

But in my 1st tab strip I want to change the background color of the selected tab and I know which css to use but how can i call both the css class on same component?

• 1st tab strip

1. Increase the font size

. new1.sapUiTabStrip {border:solid 1px #96a8c3; font-f family:Tahoma,Arial,Helvetica,sans-serif; font-size:15px; -moz-box-sizing:border-box; - webkit-box-sizing:border-box;box-sizing:border-box; position:relative; }

2. Give a background color for select tab

.new13.sapUiTabSel{ background: #ffcc66; margin-right:15px; }

• 2nd tab strip

Keep the default css style.

For the 1st tab strip if i call above css class "new1" then the font size is changing.

Along with that I want to change the background color of the selected tab.

So how can I include both the css styles in 1st tab strip component ?

Kindly advice.

Regards

Arjun KT

[Arjun_KT]

Hi Vidhya,

Thank You for the reply.

I tried it but not working and even if i give following css only that too not working in tab strip (with .new1 it is notworking).

Looks like i need figure it out @ first.

.new1.sapUiTabSel{ background: #ffcc66; margin-right:15px; }

Regards

Arjun KT

[Vidhya]

Hi,

It is very simple. Try to use same class name for both(font size and background color changing) CSS.

Please check the below CSS code,

.new1.sapUiTabStrip {border:solid 1px #96a8c3; font-f family:Tahoma,Arial,Helvetica,sans-serif; font-size:15px; -moz-box-sizing:border-box; - webkit-box-sizing:border-box;box-sizing:border-box; position:relative; }

.new1.sapUiTabSel{ background: #ffcc66; margin-right:15px; }

Please let me know if you have issue.

Regards,

Vidhya.C