How to load CSS files using JavaScript? - GeeksforGeeks

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;}
.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>                    
<!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;}
.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>                    
<!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.
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?