HTML <style>Tag

Examples

Using the <style> element in an HTML document:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example (example.com)</title> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

Try it Yourself »

Browser Support

All major browsers support the <style> tag.

Definition and Usage

The <style> tag defines style information for an HTML document.

Within the <style> element, you can specify how an HTML document should be rendered in a browser.

Each HTML document can contain multiple <style> tags.

Tips and Notes

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

Tip:To learn more about style sheets, please read ourCSS Tutorial。

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

Differences between HTML 4.01 and HTML5

The "scoped" attribute is a new attribute in HTML5 that allows us to define styles for a specified part of the document, rather than the entire document.
If the "scoped" attribute is used, the specified styles can only be applied to the parent element of the style element and its child elements.

Attributes

New: New attribute in HTML5.

Attribute	Value	Description
media	media_query	Specifies different media types for the style sheet.
scopedNew	scoped	If this attribute is used, the styles are only applied to the parent element of the style element and its child elements.
type	text/css	Specifies the MIME type of the style sheet.

Global Attributes

The <style> tag supportsHTML Global Attributes。

Event Attributes

The <style> tag supportsHTML Event Attributes。

HTML Tutorial:HTML CSS

HTML DOM Reference:Style Object

Other Extensions

HTMLTag