# .css()

Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

## css ( propertyName ) Returns: String version added: 1.0

- propertyName
  Type: String
  A CSS property.

## css ( propertyNames ) Returns: String version added: 1.9

- propertyNames
  Type: Array
  An array of one or more CSS properties.

Description: Get the computed style properties for the first element in the set of matched elements.

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`. For consistency, you can simply use `"float"`, and jQuery will translate it to the correct value for each browser.

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" )`.

Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

Retrieval of shorthand CSS properties (e.g., `margin`, `background`, `border`), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered `border-width`, use: `$( elem ).css( "borderTopWidth" )`, `$( elem ).css( "borderBottomWidth" )`, and so on.

As of jQuery 1.9, passing an array of style properties to `.css()` will result in an object of property-value pairs. For example, to retrieve all four rendered `border-width` values, you could use `$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])`.

## Examples:

#### Example: Get the background color of a clicked div.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        width: 60px;
        height: 60px;
        margin: 5px;
        float: left;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.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:

#### Example: Get the width, height, text color, and background color of a clicked div.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        height: 50px;
        margin: 5px;
        padding: 5px;
        float: left;
      }
      #box1 {
        width: 50px;
        color: yellow;
        background-color: blue;
      }
      #box2 {
        width: 80px;
        color: rgb(255, 255, 255);
        background-color: rgb(15, 99, 30);
      }
      #box3 {
        width: 40px;
        color: #fcc;
        background-color: #123456;
      }
      #box4 {
        width: 70px;
        background-color: #f11;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

    <p id="result">&nbsp;</p>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>

    <script>

    $( "div" ).click(function() {
      var html = [ "The clicked div has the following styles:" ];

      var styleProps = $( this ).css([
        "width", "height", "color", "background-color"
      ]);
      $.each( styleProps, function( prop, value ) {
        html.push( prop + ": " + value );
      });

      $( "#result" ).html( html.join( "<br>" ) );
    });

    </script>

    </body>
    </html>

#### Demo:

## css ( propertyName, value ) Returns: jQuery version added: 1.0

- propertyName
  Type: String
  A CSS property name.

- value
  Type:
  A value to set for the property.

## css ( propertyName, function(index, value) ) Returns: jQuery version added: 1.4

- propertyName
  Type: String
  A CSS property name.

- function(index, value)
  Type: Function
  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.

## css ( properties ) Returns: jQuery version added: 1.0

- properties
  Type: PlainObject
  An object of property-value pairs to set.

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

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 object of key-value pairs.

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. Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as `border` or `background` will remove that style entirely from the element, regardless of what is set 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: Change the color of any paragraph to red on mouseover event.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      p {
        color: blue;
        width: 200px;
        font-size: 14px;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

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

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

    <script>

    $( "p" ).on( "mouseover", function() {
      $( this ).css( "color", "red" );
    });

    </script>

    </body>
    </html>

#### Demo:

#### Example: Increase the width of #box by 200 pixels the first time it is clicked.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      #box {
        background: black;
        color: snow;
        width: 100px;
        padding: 10px;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.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: Highlight a clicked word in the paragraph.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      p {
        color: blue;
        font-weight: bold;
        cursor: pointer;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.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( /\s+/ );
    var text = words.join( "</span> <span>" );
    $( "p" ).first().html( "<span>" + text + "</span>" );
    $( "span" ).on( "click", function() {
      $( this ).css( "background-color", "yellow" );
    });

    </script>

    </body>
    </html>

#### Demo:

#### Example: Change the font weight and background color on mouseenter and mouseleave.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      p {
        color: green;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

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

    <script>

    $( "p" )
      .on( "mouseenter", function() {
        $( this ).css({
          "background-color": "yellow",
          "font-weight": "bolder"
        });
      })
      .on( "mouseleave", function() {
        var styles = {
          backgroundColor : "#ddd",
          fontWeight: ""
        };
        $( this ).css( styles );
      });

    </script>

    </body>
    </html>

#### Demo:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        width: 20px;
        height: 15px;
        background-color: #f33;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

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

    <script>

    $( "div" ).on( "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: