How to Create a Style Tag using JavaScript? Last Updated : 12 Nov, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report To create a <style> tag using JavaScript, use the document.createElement() method to create the tag, which allows you to dynamically add elements to the DOM.Syntaxdocument.createElement('style')Example 1: This HTML code dynamically styles a <div> element with a green background and white text using JavaScript. HTML <!DOCTYPE html> <html lang="en"> <body> <h1>GeeksForGeeks</h1> <script> const style = document.createElement("style"); style.innerHTML = ` h1 { color: green; } ` document.head.appendChild(style); </script> </body> </html> OutputExample 2: This HTML code uses JavaScript to dynamically apply styles to a webpage, setting the <p> text color to white and adding a green background in <section> element. HTML <!DOCTYPE html> <html lang="en"> <body> <p>GeeksForGeeks </p> <script> const style = document.createElement("style"); style.innerHTML = ` p { color: white; } section { background-color: green; padding: 20px; } `; document.head.appendChild(style); </script> </body> </html> Output Comment More infoAdvertise with us Next Article How to change style/class of an element using JavaScript ? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to create a div using jQuery with style tag ? Creating an <div> element with a style tag using jQuery can be done in the following steps. Steps: Create a new <div> element.Create an object with all the styles that we want to apply.Choose a parent element, where to put this newly created element.Put the created div element into the p 2 min read How to Create Tab Headers using CSS & JavaScript? Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hi 2 min read How to Create a Link in JavaScript ? In JavaScript, a link typically refers to creating HTML hyperlinks (<a> tags) dynamically using JavaScript. You can link using a document.createElement('a'), setting attributes like href and textContent, and then appending it to the document with appendChild().Here are some common approaches t 4 min read How to change style/class of an element using JavaScript ? In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com 4 min read How to Create and Use a Syntax Highlighter using JavaScript? A syntax highlighter is a tool that colorizes the source code of programming languages, making it easier to read by highlighting keywords, operators, comments, and other syntax elements in different colors and fonts. In JavaScript, you can create a syntax highlighter by either manually writing your 3 min read How to add CSS Rules to the Stylesheet using JavaScript ? In this example, we will see how to add CSS rules to the stylesheet element using JavaScript. First, we will create an HTML document and then add some CSS rules using JavaScript. Syntax: let styleText = document.getElementById('GFG').sheet; let st = `.box { width: 100px; height: 100px; }`; styleText 2 min read Like