Installation
CSS Selectors
Event Handling
DOM Manipulation
Utilities
Data Structures
AJAX APIs
Animation APIs
Widgets Creation
.css ( "class_names" | "style_json" )
.style() function is very handy when we want to style an element with single property at a time. To do multiple style property changes, style() has to be called repeatedly. and Also .style() will not attach css classes to elements.
These limitations can be overcome by using .css().
.css() helps to attach or remove css classes to or from an element. it also helps to apply multiple style changes all at a time.
Parameters
NameTypeDefaultPossibleDescription
class_namesStringClass NamesClass names separated by 'space'.
Class can be added by simply specifying the class name or prepending "+" Eg: "big_red" or "+big_red"
Class can be removed from an element by prepending "-" Eg: "-big_red"
Class names can be clubbed Eg: "+big_red +text -small_green"
style_jsonJSONStyle name value pairsMultiple styles can be applied to an element by specifying style name value pairs in JSON
Example 1
This example shows how to attach and remove a CSS class to the source element. simple class name or preceding with "+" will attach the class to element. Class names with preceding "-" will remove the class from element.
JS HTML CSS 
		$.domLoaded(function() {
			
			$.get("#btn1").on("click", function() {			
				// Attach big_red and text classes
				$.get("#box1").css("big_red text");
			});
			
			$.get("#btn2").on("click", function() {			
				// Remove thick_border class
				$.get("#box1").css("-thick_border");
			});		

		});							
						
<body>
	
	<div id="box1" class="thick_border">Div with "thick_border" class</div>
		
	<br/>
	<input type="button" id="btn1" value="Add 'big_red' & 'text' classes" /> 
	<input type="button" id="btn2" value="Remove 'thick_border' class" /> 

	
</body>
	div {
		display : inline-block;
		padding : 10px;
		margin : 5px;
	}
	
	.big_red {
		width : 200px;
		height : 100px;
		background-color : red;
	}
	
	.text {
		font-size: 20px;
		color : #aaa;
	}
	
	.thick_border {
		border: 20px solid black;
	}
Result
Example 2
Adding or Removing CSS classes can be clubbed together as 'space' separated list and provided as input. Following example attaches two classes and removes one class.
JS HTML CSS 
		$.domLoaded(function() {
			
			$.get("#btn1").on("click", function() {			
				// Attach thick_border, text and remove big_red class simultaneously
				$.get("#box1").css("+thick_border +text -big_red");
			});		

		});			
						
<body>
	
	<div id="box1" class="big_red">Div with "big_red" class</div>
		
	<br/>
	<input type="button" id="btn1" value="Add 'thick_border', 'text' and Remove 'big_red'" /> 

</body>
	div {
		display : inline-block;
		padding : 10px;
		margin : 5px;
	}
	
	.big_red {
		width : 200px;
		height : 100px;
		background-color : red;
	}
	
	.text {
		font-size: 20px;
		color : #aaa;
	}
	
	.thick_border {
		border: 20px solid black;
	}
Result
Example 3
Sometimes there may be a need for applying multiple styles and no scope for using a CSS class. css() can apply multiple styles to an element. The style should be given as name value pairs in JSON. Following example applies multiple styles to div element.
JS HTML CSS 
		$.domLoaded(function() {
			
			$.get("#btn1").on("click", function() {			
				// Attach multiple styles
				$.get("#box1").css({
					"background-color" : "red",
					"border" : "10px solid #000",
					"width" : "200px",
					"height" : "100px"
				});
			});		

		});						
				
						
<body>
	
	<div id="box1" class="big_red">Div with "big_red" class</div>
		
	<br/>
	<input type="button" id="btn1" value="Add Multiple Styles" /> 
	
</body>
	div {
		display : inline-block;
		padding : 10px;
		margin : 5px;
	}
Result