Skip to main content

Add CSS Properties to an Element Using jQuery

Submitted by admin on Thu, 12/16/2021 - 14:36

In this jQuery tutorial we will learn how to add css properties to any element (div / span / paragraph etc.) using jQuery.

Using jQuery css() method, we can add new CSS properties to any element.


For adding just one css property, use below syntax.

$('element').css('property', 'value');

For adding multiple css properties, use below syntax.

  'property-one': 'value',
  'property-two': 'value'


In below example, I am going to change the color of text under div of class newcolor to blue.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <title>Add CSS Properties Using jQuery</title>
    <script src="//"></script>
      $('.newcolor').css('color', 'blue');
    <div class="newcolor">This text is blue color</div>


Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.