Styling with JQuery
Styling with JQuery
Styling with JQuery is a free jQuery Academy lesson on CoddyKit — lesson 1 of 1. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the jQuery Academy learning path, one of 1 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Introduction
Hello,
We have worked on HTML DOM objects in all the examples so far.
With jQuery, we can also manipulate the styles of HTML elements.
JQuery provides some methods to achieve this.
class
In the first examples we will do, we will see the use of classes with JQuery.
In the example below, we inject our JQuery library into HTML and define two classes named pink and yellow that make the text pink and yellow.
Let's start 🚀
example
We added a <p> element between the <body> tags.
Currently, this element does not have a class yet.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>example 2
Now let's add the pink class to the paragraph element by using addClass() method.
On the preview screen, we will observe that the color of the Lorem ipsum text turns pink.
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
removeClass() method
If we want to remove the classes from HTML elements, the removeClass() method is used.
We changed our example below and initially defined the pink class in our HTML element. As soon as the DOM is loaded, the pink class in our p element will be removed.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>toggle Class
toggleClass() method
As it is clear from its name, with this method,
if a class exists in the target element, it removes it or adds it.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>Css Method
css() method
We have seen the methods for adding and removing classes.
Now let's learn the CSS method used to define inline styles for our HTML nodes.
The CSS method takes two parameters.
- The first parameter is the name of the property to be assigned.
- The second parameter is the value of the property to be assigned.
The following example shows different uses of the CSS method.
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
JQuery API
We have learned a lot of manipulation operations on DOM with jQuery.
In addition to the methods we learned, JQuery has many manipulation methods.
You can browse the entire API by clicking the link below.
Congratulations
Congratulations 🎉
We learned Styling with jQuery.
In the next section, we will learn Event Management in jQuery.
Frequently asked questions
Is the “Styling with JQuery” lesson free?
Yes — the full text of “Styling with JQuery” is free to read here on the web, and the jQuery Academy course includes 1 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the jQuery Academy course, upgrade to CoddyKit PRO.
What will I learn in “Styling with JQuery”?
Styling with JQuery You practise jQuery Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start jQuery Academy?
No prior experience is required. jQuery Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 1, so you can start here or from the beginning and move at your own pace.
How long does the “Styling with JQuery” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this jQuery Academy lesson?
Yes. Every jQuery Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.