HTML <style> Tag


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

h1 {color:red;}
p {color:blue;}


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


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

<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.


= 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;

Color Picker