How to Apply CSS using jQuery


we can apply styles for the HTML elements using jQuery css() method.

Syntax 
//apply single css property
$("h1").css(property,value);

//apply multiple css properties
$("h1").css({property1:value,property2:value,...});

The following example show, how to use css() method in jQuery.

Example 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <h1>Sample Heading 1</h1>
    <h2>Sample Heading 2</h2>
  <script>
    $(document).ready(function(){
      $("h1").css("color","red");
      $("h2").css({"color":"green","text-decoration":"underline","font-family":"algerian"});
    });
  </script>
  </body>
</html>
Try it Yourself

Demo