How to Control CSS with jQuery

jQuery is a powerful javascript framework. It is fun to control CSS with jQuery, you can easily manage CSS with jQuery, can add/remove css properties, classes and all other cool stuff by jquery.
Add/Remove CSS class with jQuery.
1. Load CSS sheet and jQuery.
<link rel="stylesheet" href="style1.css"> <script src="jquery.js"></script>
2. Give id to the block or paragraph to which you want to add/remove css class
<span id="text1">This is the sample text paragraph </span>
3. Use jquery to add CSS class
<script> $('#text1').addClass('style1') </script>
4. you can also add button to execute jquery, e.g
<button id="btn1">add CSS</button>
write query on button click
<script> $('#btn1').click(function() { $('#text1').addClass('style1') }) </script>
Add/Remove CSS properties with jQuery
1. add css property
$('#text1').css('color','blue');
2. remove css property
$('#text1').css('color','');
Full HTML Code for Managing CSS with jQuery
<html> <title> Manage CSS with jQuery</title> <head> <link rel="stylesheet" href="style1.css"> </head> <body> <h2> add css classes with jquery </h2> <span id="text1">This is the sample text paragraph </span> <p> <button id="btn1">add CSS</button> <button id="btn2">remove CSS</button> <button id="btn3">add color</button> <button id="btn4">remove color</button> </p> <script src="jquery.js"></script> <script> $('#btn1').click(function() { $('#text1').addClass('style1'); }) $('#btn2').click(function() { $('#text1').removeClass('style1'); }) $('#btn3').click(function() { $('#text1').css('color','blue'); }) $('#btn4').click(function() { $('#text1').css('color',''); }) </script> </body> </html>
This is how you manage CSS with jQuery