THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML <style> Tag


Example

Use of the <style> element in an HTML document:

<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>
Try it Yourself »

Definition and Usage

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser.

Each HTML document can contain multiple <style> tags.


Browser Support

Element
<style> Yes Yes Yes Yes Yes

Tips and Notes

Tip: To link to an external style sheet, use the <link> tag.

Tip: To learn more about style sheets, please read our CSS Tutorial.

Note: If the "scoped" attribute is not used, each <style> tag must be located in the head section.



Differences Between HTML 4.01 and HTML5

The "scoped" attribute is new in HTML5, which allows to define styles for a specified section of the document. If the "scoped" attribute is present, the styles only apply to the style element's parent element and that element's child elements.


Attributes

= New in HTML5.

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
scoped scoped Specifies that the styles only apply to this element's parent element and that element's child elements
type text/css Specifies the media type of the <style> tag

Global Attributes

The <style> tag also supports the Global Attributes in HTML.


Event Attributes

The <style> tag also supports the Event Attributes in HTML.


Related Pages

HTML tutorial: HTML CSS

CSS tutorial: CSS Tutorial

HTML DOM reference: Style Object


Default CSS Settings

Most browsers will display the <style> element with the following default values:

style {
    display: none;
}