overriding an existing style sheet in jquery UI

Question

How can I customize (override) an existing style sheet provided in jquery UI, like changing the colors and width and height of sliders?

Answer 1

Yes you can.

http://api.jquery.com/css/

Answer 2

Can't you change the actual stylesheet that you get from jquery.ui? You can host the alternative version on your server with the ammendments that you have made.

Answer 3

There's nothing special or magical about jQuery UI stylesheets. They're just ordinary CSS files. Open them (or browse the styles with Firebug), decide which styles you want to override, and write your new rules.

As is always the case in CSS, any styles with equivalent selectors that are defined later take precedence over those defined earlier. So if you include the default jQuery UI stylesheet first and your overrides second, yours will take precedence.

Alternatively, if you have no reason to keep the original jQuery UI styles at all, you can simply make the changes directly in that file.