How to Create a <style> Tag with JavaScript

Dynamically adding CSS rules to a page is a powerful technique for creating responsive user interfaces, theming, or applying styles based on user actions. While you can manipulate individual element styles with element.style, a more efficient way to add a block of CSS rules is by creating a <style> element and appending it to the document's <head>.

This guide will teach you the standard and most secure method for creating a <style> tag. We will also cover the more advanced CSS Object Model (CSSOM) for programmatically inserting individual rules.

The Core Task: Dynamically Injecting CSS

The goal is to add new CSS rules to the current document at runtime. The best place to add a <style> tag is inside the document.head.

Consider this HTML code for next examples:

<div id="box">This is a box.</div>

The Standard Method (Recommended): createElement and textContent

This is the safest, most readable, and most common way to create a style tag.

The logic:

1. Use document.createElement('style') to create a new <style> element in memory.
2. Set its .textContent property to a string containing all your CSS rules.
3. Append the new element to the document.head.

Solution:

// 1. Create a <style> element
const styleElement = document.createElement('style');

// 2. Add the CSS rules to the style element
// Use a template literal (backticks) for easy multi-line strings
styleElement.textContent = `
  body {
    background-color: lightgray;
  }
  
    background-color: salmon;
    color: white;
    padding: 20px;
  }
`;

// 3. Append the <style> element to the <head>
document.head.appendChild(styleElement);

An Alternative Method: insertAdjacentHTML (and its Pitfalls)

You can also inject the <style> tag as a raw HTML string. While this works, it is generally less recommended for this task.

const styleString = `
<style>
  body {
    background-color: lightblue;
  }
</style>
`;

// Insert the entire HTML string at the end of the <head>
document.head.insertAdjacentHTML('beforeend', styleString);

The Advanced Method: Using the CSS Object Model (.insertRule())

For more complex applications where you need to add or remove individual CSS rules programmatically, you should use the CSSOM. This is the API that CSS-in-JS libraries use under the hood.

The logic:

1. Create an empty <style> element and append it to the head.
2. Access its .sheet property to get a reference to the stylesheet object.
3. Use the .insertRule() method to add individual rules.

Solution:

// 1. Create and append an empty style element
const styleElement = document.createElement('style');
document.head.appendChild(styleElement);

// 2. Get the stylesheet object
const stylesheet = styleElement.sheet;

// 3. Add rules programmatically
stylesheet.insertRule('#box { border: 2px solid blue; }', 0);
stylesheet.insertRule('body { font-family: sans-serif; }', 1);

Conclusion

For dynamically adding CSS to a webpage, JavaScript provides several effective solutions.

• The recommended best practice is to use document.createElement('style') and set its .textContent. This method is safe, readable, and highly effective for injecting a block of CSS.
• The insertAdjacentHTML() method is a functional alternative but is less direct and carries potential security risks if not used carefully.
• For advanced, programmatic control over individual CSS rules, use the CSSOM by accessing the element's .sheet property and calling .insertRule().