jquery changing the actual css style
<p>I have the following style definition thant can be dynamically changed.</p>

<pre><code>&lt;style id="templateCSS"&gt;
    #box_shipto_header{
        background-color: black;
        color: white;
        padding:5px;
        }
&lt;/style&gt;
</code></pre>

<p>In the following example (see fiddle) you can see that I have a padding box where a user can enter a new value. When they do my code will overwrite everything inside the #box_shipto_header{} and not simply changing only the padding declaration. </p>

<p>I understand that using the jquery html() method will overwrite the content but I don't know of other methods to do what I need.</p>

<p>So if you enter 10 in the box it should update the  id element like that:</p>

<pre><code>&lt;style id="templateCSS"&gt;
    #box_shipto_header{
        background-color: black;
        color: white;
        padding:10px;
        }
&lt;/style&gt;
</code></pre>

<p><a href="http://jsfiddle.net/7V4TU/2/" rel="nofollow">see my fiddle</a></p>
