How to apply CSS style using jQuery ? Last Updated : 20 Sep, 2021 Comments Improve Suggest changes Like Article Like Report In this article, we will explore how we can apply CSS styles to HTML elements. It is recommended that you have some basic knowledge of HTML, CSS, JavaScript, and jQuery before beginning this article. It is possible to change the CSS property of an element by using a simple JavaScript API, but we try to complete this challenge using jQuery css() method. Syntax: $().css(propertyname, value); $().css(properties); There are many types of CSS methods, which means that each method has the same name but takes different parameters. We will discuss only two methods, one of which is used to change a single CSS property, while the other is used to change multiple CSS properties simultaneously. With the second method, you can pass a JSON string object as a parameter that you want to apply to the HTML element. JSON string objects contain CSS properties along with their values, and the first method only takes 2 parameters, namely the property name and the value. Example: By clicking the button, it adds multiple CSS properties to the selected element, but by double-clicking the button, it adds only one CSS property. The motive of this example is to show the use of two types of CSS methods which are discussed. HTML <!DOCTYPE html> <html> <head> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> </head> <body style="text-align: center; border: 2px solid green; min-height: 240px;"> <h1 style="color:green;"> GeeksforGeeks </h1> <p id="context"> Hello Geeks!! welcome to geeksforgeeks </p> <br> <button id="change"> clickme </button> <script> let css_property = { "color": "green", "font-size": "20px" } $('#change').on('click', function () { // For multiple css property $('#context').css(css_property); }); $('#change').on('dblclick', function () { // For single css property $('#context').css('display', 'none'); }) </script> </body> </html> Output: output Comment More infoAdvertise with us Next Article How to apply CSS style using jQuery ? D debadebaduttapanda7 Follow Improve Article Tags : Web Technologies JQuery Blogathon Blogathon-2021 jQuery-Questions +1 More Similar Reads How to apply styles on an element using jQuery ? In this article, we will learn how one can apply a style on an element using jQuery. Suppose you are building a website or game where you need the user interface to be interactive. In such cases styles can play a huge role there in this post we are going to learn how can we change styles when certai 3 min read How to apply CSS in last child of parent using jQuery ? In this article, we will see how to set styles in the last child of the parent element using jQuery. To set the style on the last child of parent, we use jQuery :last-child selector. The :last-child selector is used to select every element that is the last child of its parent element. Syntax: $("Sel 1 min read How to remove all CSS classes using jQuery ? In this article, we will remove all CSS classes for an element using jQuery. To remove all CSS classes of an element, we use removeClass() method. The removeClass() method is used to remove one or more class names from the selected element. Syntax: $(selector).removeClass(class_name, function(index, 2 min read How to create a div using jQuery with style tag ? Creating an <div> element with a style tag using jQuery can be done in the following steps. Steps: Create a new <div> element.Create an object with all the styles that we want to apply.Choose a parent element, where to put this newly created element.Put the created div element into the p 2 min read How to apply CSS in a particular div element using jQuery ? In this article, we will set the CSS of a div element using jQuery. We will use the CSS property to set the CSS.Approach: We will create a div element with some text and hyperlinks. Then we will use jQuery to apply CSS to the div element. jQuery comes with the function .css() where we can get and se 2 min read Like