jQuery makes working with CSS a breeze. The method here is .css(), and it is used very much like the other methods or actions in jQuery. While this entire tutorial will go against my conventional logic of only appending or removing classes, many of you will do it this way because it is much more simple. I must admit that it is a very quick and efficient way of applying CSS properties to an HTML element. Please just don't paint yourself in a corner using the css method after a selector more than a few times on a single element.

CSS Method Structures

Basic CSS Example

<div id='firstDiv' style="width:150px; background-color:#D2BA0D;color:#000000;">firstDiv</div>
<div id='secondDiv' style="width:30px; background-color:#238B0A;color:#000000;">SecondDiv</div>
<input id='buttonOneId' name="buttonOne" type="button" value="Do Something!"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#buttonOneId").click(function()
    {
        var firstWidth = $('#firstDiv').css('width');
        $("#secondDiv").css("width",firstWidth);
    });
</script>

It is really just that simple. If you have ever had 2 or 3 divs inside 1 containing div, you know how hard it is to make all of the columns the same height or width. With JQuery, it is really just that simple. Of course, if you won't usually use a button to change CSS in that way, but you still may find yourself using events to change CSS for some other good reason. It would get very tedious if you wanted to change large amount of CSS properties, which is why we have the third syntax of the css() method.

Multiple Properties Example

<div id='thirdDiv' style="width:150px; height:40px; background-color:#FDE80B;color:#000000;">firstDiv</div>
<div id='fourthDiv' style="width:30px; background-color:#238B0A;color:#000000;">SecondDiv</div>
<input id='buttonTwoId' name="buttonTwo" type="button" value="Do Something!"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#buttonTwoId").click(function()
    {
        var thirdWidth = $('#thirdDiv').css('width');
        var thirdHeight = $('#thirdDiv').css('height');
        var thirdBG = $('#thirdDiv').css('background-color');
        $("#fourthDiv").css({
            "width": thirdWidth,
            "height": thirdHeight,
            "background-color": thirdBG
        });
    });
</script>