<p>The <code>.css()</code> method is a convenient way to get a style property from the first matched element, especially in light of the different ways browsers access most of those properties (the <code>getComputedStyle()</code> method in standards-based browsers versus the <code>currentStyle</code> and <code>runtimeStyle</code> properties in Internet Explorer) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the <code>float</code> property as <code>styleFloat</code>, while W3C standards-compliant browsers refer to it as <code>cssFloat</code>. The <code>.css()</code> method accounts for such differences, producing the same result no matter which term we use. For example, an element that is floated left will return the string <code>left</code> for each of the following three lines:</p>
<p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css('background-color')</code> and <code>.css('backgroundColor')</code>.</p>
<p>Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: <code>$(elem).css('marginTop')</code> and <code>$(elem).css('marginRight')</code>, and so on.</p>
<spanclass="name">.css( propertyName, value )</span><spanclass="returns">Returns: <aclass="return"href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
</h2>
<divclass=" entry-details">
<pclass="desc"><strong>Description: </strong>Set one or more CSS properties for the set of matched elements.</p>
<ulclass="signatures">
<liclass="signature"id="css-propertyName-value">
<h4class="name">
<spanclass="versionAdded">version added: <ahref="/category/version/1.0/">1.0</a></span>.css( propertyName, value )</h4>
<pclass="arguement"><strong>function(index, value)</strong>A function returning the value to set. Receives the index position of the element in the set and the old value as arguments.</p>
<pclass="arguement"><strong>map</strong>A map of property-value pairs to set.</p>
</li>
</ul>
<divclass="longdesc">
<p>As with the <code>.attr()</code> method, the <code>.css()</code> method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single map of key-value pairs (JavaScript object notation).</p>
<p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'})</code> and <code>.css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})</code>. Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.</p>
<p>As with <code><ahref="/attr">.attr()</a></code>, <code>.css()</code> allows us to pass a function as the property value:</p>
