How to Include CSS Inside a JavaScript File?

Last Updated : 02 Dec, 2024

Here are the various ways to include CSS inside a JavaScript file.

1. Using style Property (Inline Styling)

The simplest way to include CSS in JavaScript is by directly modifying the style property of an HTML element. This method applies styles inline, directly to the elements, and overrides any external or internal CSS rules.

HTML

<html>
    <body>
        <div id="myEle">Hello, World!</div>
    <script>
        let ele = document.getElementById('myEle');
        ele.style.backgroundColor = 'lightblue';
        ele.style.fontSize = '20px';
        ele.style.padding = '10px';
    </script>
    </body>
</html>

element.style.property is used to modify the inline styles of an individual HTML element.
This method is limited to applying styles to a single element at a time.
It provides fine control over individual elements but can become cumbersome for larger styles or multiple elements.

2. Creating and Appending a style Tag

Another approach is to create a <style> tag dynamically within JavaScript and append it to the document's <head>. This method is useful when you want to include multiple CSS rules that are applied globally across your web page.

HTML

<html>
    <body>
        <div id="myEle">Hello, World!</div>
    <script>
        let style = document.createElement('style');
        style.innerHTML = `
        body {
                background-color: lightblue;
        font-family: Arial, sans-serif;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
`;
document.head.appendChild(style);
    </script>
    </body>
</html>

document.createElement('style') creates a new <style> element.
style.innerHTML allows you to add CSS rules to the newly created <style> tag.
document.head.appendChild(style) appends the <style> tag to the document's head, effectively applying the CSS rules to the page.
This approach enables you to include multiple CSS rules dynamically.

3. Using insertRule() Method

The insertRule() method allows you to add individual CSS rules to an existing <style> tag within JavaScript. It is useful if you want to add styles to a particular CSS rule dynamically.

HTML

<html>
    <body>
        <div id="myEle">Hello, World!</div>
    <script>
        let style = document.createElement('style');
        document.head.appendChild(style);
        let sheet = style.sheet;

        sheet.insertRule('body { background-color: lightblue; }', 0);
        sheet.insertRule('h1 { color: darkblue; text-align: center; }', 1);
    </script>
    </body>
</html>

style.sheet gives you access to the CSSStyleSheet object, allowing you to manipulate styles directly.
sheet.insertRule(rule, index) adds a new CSS rule to the stylesheet at the specified index.
This method is ideal for dynamically adding specific rules while maintaining the order of CSS rules.

4. Using External CSS with JavaScript

If you want to include an external CSS file dynamically, you can do so by creating a <link> tag and appending it to the document's head. This approach is helpful when you want to load CSS stylesheets on the fly, based on user interaction or other conditions.

HTML

<html>
    <body>
        <div id="myEle">Hello, World!</div>
    <script>
        let link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'styles.css';
        document.head.appendChild(link);
    </script>
    </body>
</html>

document.createElement('link') creates a new <link> element.
link.rel = 'stylesheet' specifies that the link tag refers to a stylesheet.
link.href specifies the path to the external CSS file.
This method dynamically loads an external CSS file into the page.

5. Using Template Literals for CSS in JavaScript

Template literals can be used to inject CSS styles directly into a <style> tag. This method provides the flexibility of writing multi-line CSS with embedded JavaScript expressions, making it highly readable and convenient for complex styles.

HTML

<html>

<body>
    <div id="myEle">Hello, World!</div>
    <script>
        let style = document.createElement('style');
        style.innerHTML = `
    body {
        background-color: lightblue;
    }
    .highlight {
        color: ${Math.random() > 0.5 ? 'red' : 'green'};
        font-weight: bold;
    }
`;
        document.head.appendChild(style);
    </script>
</body>

</html>

The template literal syntax (`) allows you to write multiline CSS and embed JavaScript expressions, such as ${Math.random() > 0.5 ? 'red' : 'green'}.
This is useful when you need dynamic styling based on conditions or random values.