How to load CSS files using JavaScript?

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

Approach:

Example 1: This example uses JavaScript to add CSS file in HTML document.






.GFG {
    color:green;
}




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Load CSS file using JavaScript
    </title>
 
    <script>
         
        // Get HTML head element
        var head = document.getElementsByTagName('HEAD')[0];
 
        // Create new link Element
        var 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 file in HTML document.




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




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Load CSS file using JavaScript
    </title>
 
    <script>
     
        // Create new link Element
        var 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:


Article Tags :