ZK - changing font-size of a tab

Question

I want to change the font-size of the text in a tab. This does not work:

    <zk>
    <style>
            .xxx { 
                font-size: 28px;  
            } 
    </style>

    <vlayout style="padding:20px">
        <tabbox width="100%">
            <tabs>
                <tab label="Tab 1" sclass="xxx"/>
                <tab label="Tab 2"/>
                <tab label="Tab 3"/>
            </tabs>
            <tabpanels>
                <tabpanel>This is panel 1</tabpanel>
                <tabpanel>This is panel 1</tabpanel>
                <tabpanel>This is panel 1</tabpanel>
            </tabpanels>
        </tabbox>

    </vlayout>

</zk>   

What am I doing wrong?

Answer 1

If you have to have this then you can achieve it by doing the following

.xxx * { 
            font-size: 28px !important;  
        } 

now use sclass="xxx" on tabpanels to apply instead of tab as the content goes into tabpanels.

Using .xxx * means this css class will be applied to the tabpanels as well as all children component. Also !important is required to override any font-size settings used by children components

Note: This way of overriding is NOT recommended as most components rely on their own css settings for consistent look & feel as well as behavior across all browsers