码农教程 - 一技在手,衣食无忧! tools

HTML <style> Tag

❮ Previous Complete HTML Reference Next ❯

Example

Use of the <style> element to apply a simple style sheet to 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 »

More "Try it Yourself" examples below.

Definition and Usage

The <style> tag is used to define style information (CSS) for a document.

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

Tips and Notes

Note: When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used (see example below)!

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

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

Browser Support

Element
<style> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
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.

More Examples

Example

Multiple styles for the same elements:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

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

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


❮ Previous Complete HTML Reference Next ❯