Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to load CSS files using JavaScript?

  • Last Updated : 30 Jul, 2021

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:

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

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

  • Create CSS file using name style.css:




    .GFG {
        color:green;
    }
  • Use JavaScript to add CSS file:




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

  • Create CSS file using name style.css:




    .GFG {
        font-size:24px;
        font-weight:bold;
        color:white;
        background-color:green;
        padding:10px;
        text-align:center;
    }
  • Use JavaScript to add CSS file:




    <!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:

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!