How to change font size and tab width of Form Tabs widget

Hi, I'm trying to change the font size and tab width on the widget tab using custom CSS but it is not changing anything. The reason I want to change it is I have a lot of tabs (14) for my form and want them smaller. Perhaps it is because I have overriding styles in the main CSS styles of the form but I do not know how/where I should change this so just the tab font sizes will change ...

The problem is caused by one of the existing CSS rules on the form, which is setting 13px font-size to all elements:

* {
font-family: "Metrophobic", sans-serif;
font-size: 13px;
}

So even though the CSS you have used inside the widget is correct, the CSS of the form is setting the elements inside the .tabs-list li to have 13 pixels font-size. You may want to try using this CSS in the widget instead:

.tabs-list .liContent { font-size: 8px; }

If you also want to reduce horizontal width of the tabs, you can use a CSS rule such as this one:

.tabs-list.tabs-list li { padding: 3px 14px; }

The result of both of these rules would look like this:

Let us know if you need further assistance, and we will be happy to help.