I recommend using FF with Firebug (though developer tools in IE8 may also help, along with similar tools for Safari, etc.), so that you can see how the CSS is being determined.
Your technique will end up resulting in your style not being used. Instead, the CSS debuggers show it uses the font-size from this:
.v-app, .v-window, .v-popupview-popup, .v-app input, .v-app button, .v-app textarea, .v-window input, .v-window button, .v-window textarea, .v-popupview-popup input, .v-popupview-popup button, .v-popupview-popup textarea, .v-filterselect-suggestpopup, .v-datefield-popup, .v-datefield-calendarpanel-header button, .v-contextmenu, .v-Notification, .v-menubar-submenu, .v-table-header-drag, .v-filterselect-select-button .v-filterselect-input, .v-drag-element
And it finds that before your theme’s styles.css specification, so it’s overrides it.
While I don’t know the best/recommended way to do this, I found that when I’m putting a TextField for example into a Form (subclass of Form), on the Form itself I use something like the following in my Mycoolform’s constructor:
setStyleName(“mycoolform”);
Then if your CSS uses .mycoolform .mycooltitle { … } it will find your style before the others. If your TextField is inside a Layout, too, if you set a stylename for the Layout, it will also work similarly.
I’m not a CSS expert, so it’s not always clear why this is the case, but I do know that if you can style the container and then the component, using .containerStyle .componentStyle in my CSS seems to have it be found and used ahead of anything else.
Good luck…