How do I style non-widget content with jQuery UI?

I am building a jQuery UI site. I can see how easy it is to add widgets or dialogs and also I have seen it is possible to style elements using the theming api:

http://jqueryui.com/docs/Theming/API

So how do I style things like normal text or html headers 1-3 or html tables?

I would like to use the c开发者_开发问答lasses and styles from jQuery UI so everything fits together and changes when I change the theme.

I have tried to apply ui-widget-content or ui-widget-header to divs or h1,h2, but maybe there is a better way, or an in depth tutorial somewhere.

I usually detect the class of the theme I want to customize, and then instead of changing directly in the jquery css, (because I prefer to have udner control my changes, and ebcuase if I update the theme, don't need to add the changes again) , I add these modified classes in an "override" block or how you want to name it, so that are same classes, but with an important;! or other hierarchy trick added. For instance, calling the parent ID to give it more weight: #content .ui-widget-content {whatever} , or .ui-widget-content {whatever property:whatever value !important;}

Is usually some small bits, never a large portion of things that I want to customize, so adding these 2 or 3 classes in my main.css does not hurt. It depends, though.

edit: Oh... with "oder" you meant "order". Sorry, was not understanding well your question (is a bit unclear). If you are not supporting IE7, you might be interested in using:

tr:nth-child(even) {background: #fff}

tr:nth-child(odd) {background: #000}