All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Add CSS In jQuery

Last Updated : Mar 11, 2024

How To Add CSS In jQuery

In this tutorial we will show you the solution of how to add CSS in jquery, as we know css used to style html elements, here we used css with jquery to make colorful text on webpage.

When we make colorful text we can see clearly from normal text.

For make text to be colorful we need to use style property of ‘color’ on jquery code with value to any color like ‘red,yellow,green…etc’ and we need to append this style to respective element.

This style is mostly used to highlight the main text from a paragraph, a blog or website anything.

Step By Step Guide On How To Add CSS In jQuery :-

In our program we defined one <h1> header tag with some text it will display on webpage with green color.

Because we added color style to jquery for make <h1> element became colorful. In jquery we used ready() and css() method to add color to h1 element successfully.

Ready() method will make ready event occurs when the DOM has been loaded and css() method sets or returns one or more style properties for the selected elements.

So we used them to add css style to <h1> elements.

<!DOCTYPE html>
<html>
    <head>
        <title>ADD CSS IN JQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color","green");
        });
    </script>
    </head>
    <body>
        <h1>HELLO EVERYONE</h1>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Here we defined <script> tag to import jquery support library on html page to support jquery code.
  5. Within <script> tag we defined jquery function, here ready() automatically loads when we execute this program on browser within that we added color style with value ‘green’ color by css() method then appends to ‘h1’ element by ‘.(dot) refers appending’.
  6. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  7. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  8. We defined <h1> tag with some text of ‘HELLO EVERYONE’ and we can also give any texts like that.
  9. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to add css in jquery. When we execute’s this program we need internet connection because we used external cdn of jquery library support file it will supports only at online.

It is a open source available cdn to support jquery programs on html file. Our program will display ‘HELLO EVERYONE’ text on webpage with green color added by jquery code.

It is really important and widely using concept to attract user’s attention quickly or can understand easily using this method when we display texts with color.

We can add any color on text or sentence like anything.

I hope this tutorial on how to add CSS in jquery helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪