---
title: "JQuery css method"  
description: "In jQuery css () method is very useful. By using this method we can change style of elements. In this article I am trying to show you, how we can appl"  
author: "Sachindra Singh"  
published: 2011-02-22  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/471/jquery-css-method  
category: "jquery"  
tags: ["jquery"]  
reading_time: 1 minute  

---

# JQuery css method

In jQuery css () method is very useful. By using this method we can change style of elements. In this article I am trying to show you, how we can apply css method on web page. By using this method we can define element style, format, height or width etc. In this example <div>element contain text and I want to change font color of text by using css () method. In the page when button is clicked then css of <div> tag is changed as shown by following example\

##### Syntax:

- (“target”).css (“keyname”);
- (“target”).css (“keyname”, value”);
- (“target”).css({properties});

##### Code:

```
<head>     <title>jQuery css method</title>     <script type="text/javascript" src="jquery.min.js">      </script>     <script type="text/javascript">         $(document).ready(function()        {            $("button").click(function()            {                $("div").css("color","blue");//when button is clicked css will apply on <div> element            });           });     </script></head><body>     <div style="width:300px;height:100px;position:relative"> <!--div element contain some text-->        &nbsp;JQuery is a library that makes it quicker and easier         to build JavaScript webpages and web application.     </div>     <button>    Blue font     </button></body></html>
```

##### Screenshot

![JQuery css method](https://www.mindstick.com/mindstickarticle/83bb0ace-7382-49eb-829f-fa34d270d44d/images/44661e2b-a19e-445c-b58b-bd2d0ff5c2f0.png)

If I will click Blue font button then it will change font color of <div> control as shown below:

##### Screenshot

![JQuery css method](https://www.mindstick.com/mindstickarticle/83bb0ace-7382-49eb-829f-fa34d270d44d/images/d6b71f62-8eee-4483-a2a0-2ad64d537bb8.png)

---

Original Source: https://www.mindstick.com/articles/471/jquery-css-method

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
