Question

I used typical way to create tabs using jQuery UI, by wrapping up asp.net usercontrols as below –

<div id="tabs">
    <ul>
        <li><a href="#tab1">Schools</a></li>
        <li><a href="#tab2">Colleges</a></li>
    </ul>
    <div id="tab1">
        <uc:schools id="ucSchools" runat="server" />
    </div>
    <div id="tab2">
        <uc:colleges id="ucColleges" runat="server" />
    </div>
</div>

Tabs work awesome, but including jQueyui.css. Made all the contents of the my user control larger, than usual.

<link href="jquery-ui.css" rel="stylesheet" type="text/css" />

I do not see any name collision in jqueryui.css with our stylesheet.

If you’ve encountered this issue, please suggest how to tweak the css to keep containing div size intact.

Answer 1

Which ever class you want to have first priority or override then you should use !important

Example:

div { 
   color: #ff0000 !important; 
}

UPDATE:

Apart from !important, the other way is “Render your link tag after jquery-ui stylesheet link on the page. So your file takes priority and applies to the page”.

Example:

<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css" />