jQuery With CSS

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.

The jQuery CSS Method has three different structures for its 3 different arguments.

  • .css(name) – returns the CSS property of the value
  • .css(name,value) – sets a CSS property
  • .css({properties}) – sets multiple CSS properties

We will use the first two in this example.


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.


If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Share on Google+
Share on StumbleUpon
Digg this
Tweet about this on Twitter
Share on Reddit

Leave a Reply

Your email address will not be published. Required fields are marked *