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.


Here is my html code:

	<span>Sample text!</span>
	<br />
<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 :)

}, function(){

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:




10 replys to Basic jQuery Tutorial: Change CSS

  1. Pingback: Design Gala
  2. Pingback: JQuery Watcher
  3. Pingback: WordPress Rocker
  4. Pingback: WordPress Rocker
  5. 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?


  6. 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!


    Click me

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

    i.e. it should have been:

    Sample text!


    Click me

    Thanks for this post nonetheless :)!!

Leave a Reply

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