How to load CSS files using JavaScript?

Read

Courses

The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files to the HTML document. JavaScript can also be used to load a CSS file in the HTML document.

Approach:

Use the document.getElementsByTagName() method to get HTML head element.
Create a new link element using createElement(‘link’) method.
Initialize the attributes of the link element.
Append the link element to the head.

Example 1: This example uses JavaScript to add CSS files to an HTML document.

Create CSS file using name style.css:

CSS

.GFG {
    color:green;
}

Use JavaScript to add CSS file in HTML file:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Load CSS file using JavaScript
    </title>
 
    <script>
         
        // Get HTML head element
        let head = document.getElementsByTagName('HEAD')[0];
 
        // Create new link Element
        let link = document.createElement('link');
 
        // set the attributes for link element
        link.rel = 'stylesheet';
     
        link.type = 'text/css';
     
        link.href = 'style.css';
 
        // Append link element to HTML head
        head.appendChild(link);
    </script>
</head>
 
<body>
    <h2 class="GFG">GeeksForGeeks</h2>
</body>
 
</html>

Output:

Example 2: This example uses JavaScript to add CSS files in HTML document.

Create CSS file using name style.css:

CSS

.GFG {
    font-size:24px;
    font-weight:bold;
    color:white;
    background-color:green;
    padding:10px;
    text-align:center;
}

Use JavaScript to add CSS file in HTML file:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Load CSS file using JavaScript
    </title>
 
    <script>
        // Create new link Element
        let link = document.createElement('link');
 
        // set the attributes for link element
        link.rel = 'stylesheet';
 
        link.type = 'text/css';
 
        link.href = 'style.css';
 
        // Get HTML head element to append
        // link element to it
        document.getElementsByTagName('HEAD')[0].appendChild(link);
 
    </script>
</head>
 
<body>
    <div class="GFG">GeeksforGeeks</div>
</body>
 
</html>

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. JavaScript is best known for web page development but it is also used in a variety of non-browser environments.You can learn more about CSS and Javascript from the links given below:

CSS Tutorial and CSS Examples
JavaScript Tutorial and JavaScript Examples

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Looking for a place to share your ideas, learn, and connect? Our Community portal is just the spot! Come join us and see what all the buzz is about!

Last Updated : 07 Dec, 2023