How to create a style tag using JavaScript?

02 Sep, 2021
The document.createElement(‘style’) method is used to create the style element using JavaScript. The steps to create style element are listed below:
Steps: 
Create a style element using the following syntax Syntax: 
document.createElement('style');
Apply the CSS styles.
Append this style element to the head element. Syntax: 
document.getElementsByTagName("head")[0].appendChild(styleElement);
Example 1: This example changes the <h1> color to green by creating the style element using JavaScript.  
HTML
<!DOCTYPE html><html> <head>    <title>        Create style tag using JavaScript    </title></head>     <body>    <h1>GeeksForGeeks</h1>         <!-- Script to add style element -->    <script type="text/javascript">                 /* Function to add style element */        function addStyle(styles) {                         /* Create style document */            var css = document.createElement('style');            css.type = 'text/css';                     if (css.styleSheet)                css.styleSheet.cssText = styles;            else                css.appendChild(document.createTextNode(styles));                         /* Append style to the tag name */            document.getElementsByTagName("head")[0].appendChild(css);        }                 /* Set the style */        var styles = 'h1 { color: green }';        styles += ' body { text-align: center }';                 /* Function call */        window.onload = function() { addStyle(styles) };    </script></body> </html>                   
Output: 
Example 2: This example changes the <h1> text-color to white and background-color of <div> element to green by creating the style element using JavaScript. 
HTML
<!DOCTYPE html> <html>  <head>    <title>        Create style tag using JavaScript    </title></head>      <body>     <div id="header">        <h1>GeeksForGeeks</h1>    </div>         <!-- Script to create style tag -->         <script type="text/javascript">             /* Function to add style */        function addStyle(styles) {                         /* Create style element */            var css = document.createElement('style');            css.type = 'text/css';                  if (css.styleSheet)                css.styleSheet.cssText = styles;            else                css.appendChild(document.createTextNode(styles));                         /* Append style to the head element */            document.getElementsByTagName("head")[0].appendChild(css);        }                 /* Declare the style element */        var styles = 'h1 { color: white }';        styles += ' body { text-align: center }';        styles += ' #header { height: 50px; background: green }';                 /* Function call */        window.onload = function() { addStyle(styles) };    </script>   </body>  </html>
Output: 
 
ruhelaa48
JavaScript-Misc
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?