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.

Try `.ui-widget { font-size: inherit }`. If that's no good, this probably isn't doable. — thirtydot, May 22 '12 at 22:22
`inherit` worked. Thanks a lot. I wish you guys posted it as an answer so I could accept. — hobbes3, May 23 '12 at 04:29

score 16 · Accepted Answer · answered May 23 '12 at 16:08

16

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

answered May 23 '12 at 16:08

Tyler Crompton

12,284
14
65
94

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

1 Answers1