Reduce Size of the jQuery DatePicker

I often use the jQuery ui-lightness theme for my DatePicker, which I feel is quite nice. However by default, the DatePicker layout is quite ‘explosive’ and displays with big fonts.

However there is a simple way to change that with a small amount of css. Here’s some sample CSS to reduce the font-size of the DatePicker to reduce its size and change some styling

<style type="text/css">
    .ui-datepicker {
        font-family:Garamond;
        font-size: 11px;
        margin-left:10px
     }
</style>

Now if you run the same code, the DatePicker shows up like this: