Basic jQuery Tutorial: Change CSS

In this article, I will be showing you how to add or change css styling. You will be able to add or remove class in HTML elements.

VIEW DEMO

Here is my html code:

<div>		
	<span>Sample text!</span>
	<br />
	Testing!
</div>
<br />
 
<div>Click me</div>

As you can see above, I have a div with id ‘content’. I have ‘Sample text!’ inside span. And I have a div with id ‘clickme’.

Here is CSS class to be used:

.hover {
	text-decoration: underline;
	cursor: pointer;
	color: #003399;
	font-weight: bold;
}

Here is the magical jQuery function :)

$("#clickme").hover(function(){
	$(this).addClass("hover");
}, function(){
	$(this).removeClass("hover");
});

Here, ‘hover’ function is used. It means that, when we hover on ‘Click me’ div then the CSS class ‘hover’ is added to the ‘clickme’ div. The ‘hover’ class will change the color, font-weight, etc. of the div text ‘Click me’.

Now, when we click the ‘Click me’ text, then the CSS styling is added to the div ‘content’. The new styling will change the text of div ‘content’ to green in color and it also increases the font size. The following jQuery code is used:

$("#clickme").click(function(){
	$("#content").css({"color":"green","font-size":"20px"});
});

VIEW DEMO

Cheers,

10 Comments Basic jQuery Tutorial: Change CSS

  1. Pingback: Design Gala

  2. Pingback: JQuery Watcher

  3. Pingback: Basic jQuery Tutorial: Change CSS | Drakz Free Online Service

  4. Pingback: WordPress Rocker

  5. Pingback: WordPress Rocker

  6. Pingback: 7 Basic jQuery Goodness | jQuery4u

  7. sam

    Hi,
    nice article i think changing css can be useful.

    Can i ask how did you get rid of the linkwithin text on the related topics section?

    Thanks
    Sam

    Reply
  8. Arran North

    Hi,

    Came across your site when looking for the above; I’m a bit of a jQuery noob, but noticed you made a mistake…

    In the post above it states…

    Sample text!

    Testing!

    Click me

    But you didn’t give the div an id of clickme

    i.e. it should have been:

    Sample text!

    Testing!

    Click me

    Thanks for this post nonetheless :)!!

    Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>