# .css()

Categories: CSS | Manipulation > Style Properties

## .css( propertyName ) Returns: String

Description: Get the value of a style property for the first element in the set of matched elements.

- #### version added: 1.0.css( propertyName )

  propertyNameA CSS property.

The `.css()` 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 `getComputedStyle()` method in standards-based browsers versus the `currentStyle` and `runtimeStyle` properties in Internet Explorer) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the `float` property as `styleFloat`, while W3C standards-compliant browsers refer to it as `cssFloat`. The `.css()` 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 `left` for each of the following three lines:

1. `$('div.left').css('float');`
2. `$('div.left').css('cssFloat');`
3. `$('div.left').css('styleFloat');`

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 `.css('background-color')` and `.css('backgroundColor')`. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: `$(elem).css('marginTop')` and `$(elem).css('marginRight')`, and so on.

### Example:

#### To access the background color of a clicked div.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
    div { width:60px; height:60px; margin:5px; float:left; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>

    <span id="result">&nbsp;</span>
    <div style="background-color:blue;"></div>
    <div style="background-color:rgb(15,99,30);"></div>

    <div style="background-color:#123456;"></div>
    <div style="background-color:#f11;"></div>
    <script>
    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

    </script>

    </body>
    </html>

#### Demo:

## .css( propertyName, value ) Returns: jQuery

Description: Set one or more CSS properties for the set of matched elements.

- #### version added: 1.0.css( propertyName, value )

  propertyNameA CSS property name.

  valueA value to set for the property.

- #### version added: 1.4.css( propertyName, function(index, value) )

  propertyNameA CSS property name.

  function(index, value)A function returning the value to set. `this` is the current element. Receives the index position of the element in the set and the old value as arguments.

- #### version added: 1.0.css( map )

  mapA map of property-value pairs to set.

As with the `.prop()` method, the `.css()` 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).

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 `.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'})` and `.css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})`. 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.

When using `.css()` as a setter, jQuery modifies the element's `style` property. For example, `$('#mydiv').css('color', 'green')` is equivalent to `document.getElementById('mydiv').style.color = 'green'`. Setting the value of a style property to an empty string — e.g. `$('#mydiv').css('color', '')` — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's `.css()` method, or through direct DOM manipulation of the `style` property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or `<style>` element.

As of jQuery 1.6, `.css()` accepts relative values similar to `.animate()`. Relative values are a string starting with `+=` or `-=` to increment or decrement the current value. For example, if an element's padding-left was 10px, `.css( "padding-left", "+=15" )` would result in a total padding-left of 25px.

As of jQuery 1.4, `.css()` allows us to pass a function as the property value:

    $('div.example').css('width', function(index) {
      return index * 50;
    });

This example sets the widths of the matched elements to incrementally larger values.

Note: If nothing is returned in the setter function (ie. `function(index, style){})`, or if `undefined` is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

### Examples:

#### Example: To change the color of any paragraph to red on mouseover event.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      p { color:blue; width:200px; font-size:14px; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>

      <p>Just roll the mouse over me.</p>

      <p>Or me to see a color change.</p>

    <script>
      $("p").mouseover(function () {
        $(this).css("color","red");
      });
    </script>

    </body>
    </html>

#### Demo:

#### Example: Increase the width of #box by 200 pixels

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      #box { background: black; color: snow; width:100px; padding:10px; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>

      <div id="box">Click me to grow</div>

    <script>
      $("#box").one( "click", function () {
        $( this ).css( "width","+=200" );
      });
    </script>

    </body>
    </html>

#### Demo:

#### Example: To highlight a clicked word in the paragraph.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      p { color:blue; font-weight:bold; cursor:pointer; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>

    <p>
      Once upon a time there was a man
      who lived in a pizza parlor. This
      man just loved pizza and ate it all
      the time.  He went on to be the
      happiest man in the world.  The end.
    </p>
    <script>
      var words = $("p:first").text().split(" ");
      var text = words.join("</span> <span>");
      $("p:first").html("<span>" + text + "</span>");
      $("span").click(function () {
        $(this).css("background-color","yellow");
      });

    </script>

    </body>
    </html>

#### Demo:

#### Example: To set the color of all paragraphs to red and background to blue:

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      p { color:green; }
    </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>

      <p>Move the mouse over a paragraph.</p>
      <p>Like this one or the one above.</p>

    <script>
      $("p").hover(function () {
        $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
      }, function () {
        var cssObj = {
          'background-color' : '#ddd',
          'font-weight' : '',
          'color' : 'rgb(0,40,244)'
        }
        $(this).css(cssObj);
      });
    </script>

    </body>
    </html>

#### Demo:

#### Example: Increase the size of a div when you click it:

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { width: 20px; height: 15px; background-color: #f33; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>

      <div>click</div>
      <div>click</div>

    <script>
      $("div").click(function() {
        $(this).css({
          width: function(index, value) {
            return parseFloat(value) * 1.2;
          },
          height: function(index, value) {
            return parseFloat(value) * 1.2;
          }

        });
      });
    </script>

    </body>
    </html>

#### Demo: