What is the best way to override/remove certain attribute in an externally hosted css (specifically Google CDN jquery-ui.css)?

Question

I am using Google CDN to host one of jQuery UI theme's CSS.

However there are some css properties that I would like to override.

I understand it's possible to do it with jQuery .removeClass() or .css(), but can I do it with my own css file?

For example, in the jQuery UI theme's css, there is

.ui-widget {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
}

How would I remove the font-size attribute? I don't necessary want to override it. I just want to completely remove it so that the font-size defaults back to the body property of 0.75em.

Emmer

Remove: JavaScript; Override: CSS – Mauchi

Try .ui-widget { font-size: inherit }. If that's no good, this probably isn't doable. – Towe

inherit worked. Thanks a lot. I wish you guys posted it as an answer so I could accept. – Emmer

Answer 1

As @thirtydot stated in the comments, the font-size property of .ui-widget to inherit.

Mauchi