Am using 2 Jquery Dialog box in my xhtml page. There are 2 links and when a user clicks on those links each link will render a different Dialog box. Different Dialog box in the sense look and feel are different. Since both are referring to jquery-ui-rev.css whatever CSS changes are done in that .css file, it is getting applied to both the Dialog box.
So, I tried with dialogClass . I applied dialogClass for one of the Dialog box and left the other as it is.
And I came up with below code and deployed it.
$j("#dialog").dialog({
dialogClass: 'ui-dialog',
....
<head>
<style type="text/css">
.ui-dialog
{
padding: none;
overflow: hidden;
position: absolute;
width: 100px;
left: 100px;
top: 100px;
}
</style>
</head>
But, ui-dialog class I have written here is not overriding the standard ui-dialog class of jquery-ui-rev.css. Then, I also tried with a different name for ui-dialog. i.e., I renamed ui-dialog with my-dialog. Even then my-dialog is not getting applied for Dialog box. It still takes from standard CSS class of ui-dialog.
Then, I also tried with below code
$j("#dialog").addClass('my-dialog').dialog({
This also couldn’t override the standard ui-dialog class.
PS Note : I have renamed jquery-ui-rev.css to jquery-ui-curretpacks.css. jquery-ui-currentpacks.css contains exact contents of jquery-ui-rev.css
@Dipaks I have tried the solution as you have mentioned. Code is as below,
$('.ui-dialog').addClass('new-ui-dialog');
$j("#dialog").dialog({
dialogClass: 'new-ui-dialog',
....
But, as I have attached in the new image, it can be seen that though ui-dialog is getting replaced by new-ui-dialog, but css properties are still taken from ui-dialog.
I also gave a try without dialogClass like below,
$j(“#dialog”).dialog({
…..
<style type="text/css">
.new-ui-dialog
{
//my new css
}
</style>
Am attaching 3rd image here. In this SS, new-ui-dialog attributes are overridden still. 
.ui-dialogis adding inline css for the element. If you want to override these styles do this –CSS –