In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > methods > createStyleSheet (document)

createStyleSheet method (document)

Browser support:

Creates a styleSheet object and inserts it into the current document.

The createStyleSheet method is only supported by Internet Explorer. In other browsers, use the createElement method to create a new link or style element, and the insertBefore or appendChild method to insert it into the document. See the examples below for details.

Syntax:

object.createStyleSheet ([URL [, index]]);

You can find the related objects in the Supported by objects section below.

Parameters:

URL

Optional. String that specifies the URL of a style file. If an URL is specified, a new link element is inserted into the current document that imports the style file. If this parameter is not specified or an empty string is set, then an empty style element is inserted into the current document.

index

Optional. Integer that specifies the position of the new styleSheet object in the styleSheets collection of the document. This parameter also has effect on the source position of the inserted link or style element. If this parameter is not specified, the new styleSheet object is inserted at the end of the styleSheets collection and the new link or style element is inserted after the other link and style elements in source order.

Return value:

Returns the newly created styleSheet object.

Example HTML code 1:

This example illustrates the use of the createStyleSheet method to import a new CSS file into the document:

Code

style.css

<head>
    <script type="text/javascript">
        function ImportStyleFile () {
            document.createStyleSheet ("style.css");
        }
    </script>
</head>
<body>
    <button onclick="ImportStyleFile ()">Import a style file</button>
</body>

body {
  background-color: #FF0000;
}

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates a cross-browser solution for the previous one:

Code

style.css

<head>
    <script type="text/javascript">
        function ImportStyleFile () {
            var linkTag = document.createElement ("link");
            linkTag.href = "style.css";
            linkTag.rel = "stylesheet";
            var head = document.getElementsByTagName ("head")[0];
            head.appendChild (linkTag);
        }
    </script>
</head>
<body>
    <button onclick="ImportStyleFile ()">Import a style file</button>
</body>

body {
  background-color: #FF0000;
}

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the createStyleSheet method for creating an empty style sheet:

<head>
    <script type="text/javascript">
        function CreateStyleSheet () {
            var styleSheet = document.createStyleSheet ("");
            styleSheet.cssText = "body {background-color: #FF0000;}";
        }
    </script>
</head>
<body>
    <button onclick="CreateStyleSheet ()">Create a style sheet</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example illustrates a cross-browser solution for the previous one:

<head>
    <script type="text/javascript">
        function CreateStyleRule () {
                // create a new style sheet 
            var styleTag = document.createElement ("style");
            var head = document.getElementsByTagName ("head")[0];
            head.appendChild (styleTag);

            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
            
                // add a new rule to the style sheet
            if (sheet.insertRule) {
                sheet.insertRule ("body {background:red;}", 0);
            } 
            else {
                sheet.addRule ("body", "background:red", 0);
            }
        }
    </script>
</head>
<body>
    <button onclick="CreateStyleRule ();">Create a new style rule!</button>
</body>