Using jQuery UI css styles for my own HTML elements

Question

Using jQuery UI gives me these nice stylesheets. These apply to the widgets, ... of jQuery UI. But how could I apply these styles to my own HTML elements to have the same look and feel?

When I change the jQuery UI theme I want my pages to change accordingly. I am aware there are similar questions such as " jQuery UI Themeroller Question ". There it is said I can only open the CSS and manually apply a CSS class to my elements.

Is there no better / official way to do it? Especially with the Theme Switcher I could easily have a customizable UI.

-- Add on to original question --

OK, all of you explain me, that I have to manually apply the css class to my element. I appreciate the information and you certainly have more CSS experience than I do. However, when I later want to change the style, I have to change this (jQuery UI) class in many places - e.g. all td elements. So in my CSS files I prefer to apply styles via selectors.

Q: Can I re-apply a class (of the jQuery UI css) with a selector, something like "apply class XYZ to all of my table headers in div "ABC"?

I could do this via jQuery selection, but can I do it within "my css"?

Answer 1

To answer your question, that is the official way of theming your own elements not constructed by a jQuery UI widget. You must apply the specific classes to your elements, and they will end up looking like other widgets from jQuery UI.