how to change style (CSS) of jquery ui datapicker
<p>i am new in php and javascript. i am using jquery UI datapicker in my webpage. i used this calendar </p>

<pre><code>http://jqueryui.com/download
</code></pre>

<p>its css code is </p>

<pre><code>    &lt;style type="text/css"&gt;
        /*demo page css*/
        body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
        .demoHeaders { margin-top: 2em; }
        #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
        #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
        ul#icons {margin: 0; padding: 0;}
        ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
        ul#icons span.ui-icon {float: left; margin: 0 4px;}
    &lt;/style&gt;
</code></pre>

<p>and html code  is:</p>

<pre><code> &lt;td&gt;Required Date:&lt;/td&gt;
  &lt;td&gt;
   &lt;script&gt;
    $(function() {
        $( "#datepicker" ).datepicker();
             });
   &lt;/script&gt;



&lt;div class="demo"&gt;

&lt;p&gt;&lt;input type="text" id="datepicker"&gt;&lt;/p&gt;

&lt;/div&gt;&lt;!-- End demo --&gt;


&lt;div class="demo-description" style="display: none; "&gt;
--some description
&lt;/div&gt;&lt;!-- End demo-description --&gt;
&lt;/td&gt;
</code></pre>

<p>now the problem is the body style of this calendar implemented on whole page ,while i have another css file of my page.. and if i remove the body style of this calendar then my calendar appears too large.<code>. i want the size of my calendar is same as mentioned in body style. what should i do.. please need help</code></p>
