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

You are here: Reference > HTML > tags > style

style element

Browser support:

Specifies style sheet rules for a document.

The style element allows authors to include CSS code into the HTML document. The style tag should be placed in the head element.

To include an external CSS file into the HTML document, use the link element or the @import at-rule. If you want to import a CSS file into another CSS file, use the @import at-rule. See Example 2.

If you want to see the HTML tags by categories, please visit this page.

This element requires a closing tag.

JavaScript page for this element: style.

Possible members:

Attributes

Events

Styles

dir

Sets the text direction as related to the lang attribute.

DISABLED

Sets the state of an object for user interaction.

Sets a unique identifier for the object.

lang

Specifies the language of the element.

media

Specifies the media types for style definition.

name

Sets the name of an element.

title

Specifies a tooltip for an element.

type

Specifies the type of style sheet language.

xml:lang

Sets the language code of the XML document.

Example HTML code 1:

This example illustrates the use of the style element:

<head>
    <style>
        #sampleID {color:red;}
        .sampleClass {color: green;}
        b {color: blue;}
    </style>
</head>
<body>
    <div id="sampleID">The color of this text is red.</div>
    <div class="sampleClass">The color of this text is green.</div>
    <b>The color of this text is blue.</b>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to import an external style sheet into the document. For detailed description, please see the @import at-rule.

Code

red.css

<head>
    <style>
        @import "red.css";
    </style> 
</head>
<body>
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>