Latest web development tutorials

HTML <style> tag

Examples

Using the <style> element in an HTML document:

<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

</html>

try it"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

All major browsers support the <style> tag.


Tag definitions and instructions

<Style> tag defines the style information in the HTML document.

In the <style> element, you can specify the browser how to render the HTML document.

Each HTML document can contain multiple <style> tag.


Tips and Notes

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

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

NOTE: If you do not use the "scoped" property, each <style> tag must be on the head of the head region.


Differences between HTML 4.01 and HTML5

"Scoped" attribute in HTML 5 is a new property, which allows us to define a style for the specified part of the document, rather than the entire document.
If you use a "scoped" attribute, then the style can be applied only to the specified parent element style element and its child elements.


Attributes

New: HTML5 new property.

属性 描述
media media_query 为样式表规定不同的媒体类型。
scoped New scoped 如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。
type text/css 规定样式表的 MIME 类型。


Global Properties

<style> tag supports HTML global properties .


Event Properties

<style> tag supports HTML event properties .


related articles

HTML Tutorial: HTML the CSS

HTML DOM Reference: Style Objects