The jQuery API of .css() allows you to add inline styles for the specified element. By inline styles, we mean that there will be a style="..." section added into the HTML for the page. Inline styles override styles coming from stylesheets. If you want to add styling from the existing stylesheet, you should use something like .addClass().

With .css(), you can add one or sets of properties and values to the element. For the most part the style names are the same that you would use for CSS. There are exceptions for properties that have shortcut notations, like border and background. jQuery does not allow the shortcuts, so you must spell out the exact property, such as background-color, or border-color, border-style, border-width.

With .css(), you can retrieve the current inline styles for an element and assign those values to a variable or for testing.


<h1 class="page-title">Amphibians</h1>

Result of script


Three dot cartouche

Things to note about using .css() to assign inline styles

♦ to add a single style:

  • separate the property from the value with a comma
  • the property and the value each must be placed it its own quotation marks

$("div.quoteBox).css("background-color" , "#EEEEEE");

♦ to add multiple styles:

  • place all the sets of properties and values inside a single set of curly braces
  • properties and values should be in their own quotation marks
  • separate each property from its value with a colon
  • separate each set of property:value with a comma

    "background-color" : "#EEEEEE",
    "color" : "#3377EE",
    "font-family" : "Courier"

Three dot cartouche

Retrieve information about existing styles from an element with .css()

You can also us jQuery API .css() to retrieve the existing styles. You might want to use this information for assigning to other elements on the page or use it for a test of some sort. You must state which property you are targeting. This will return the computed value, which means that it will return the value for that property as the browser has styled it, whether it was a style defined in a stylesheet or not.

var fonttest = $("").css("font-family");

The above example will assign the computed value for the font-family for <h1 class="page-title"> to the variable fonttest.