Easy way to overwrite basic jQuery-UI css?

Question

I feel like this is a silly question but I always find that modifying certain CSS attributes to be a hassle when working with jQuery. Let's say I define an element as a jQuery-UI object (like autocomplete or the datepicker) how do I go about modifying the CSS without having to go on the UI site and building my own theme?

For example, I find that the default font-size of the calendar to be pretty big so I often have to find the containing div created by jQuery and then add a font-size: 14px !important; if I want the style to be applied or else it gets trumped by the jQuery definition (since it's a lot more selective).

Is the solution making my rules more selective or am I missing something really obvious?

Answer 1

I have not used JQuery-UI, but a quick look at their documentation seems to indicate that a lot of styling should be simple to override. This page http://jqueryui.com/docs/Theming/API talks about your particular example of font-size, stating that the .ui-widget class controls the font-size for a particular widget. So it seems like for you to get your font size, you would just need to have some css that does this:

#ui-datepicker-div.ui-widget {font-size: 14px}

Hope that helps.