HTML <style> tag

Definition and Usage

<style> tag is used to define the style information of the document (CSS).

In <style> element, you can specify how the HTML element is displayed in the browser.

Please note that the style element defines embedded CSS styles within the HTML document, while the link element is used to import styles from external style sheets.

The style element can appear in any part of an HTML document. A document can contain multiple style elements, so it is not necessary to put all the style definitions in the head section. This feature is very helpful in the case of using template engines to generate pages, as it allows for the addition of page-specific styles to the styles defined by the template.

See also:

HTML Tutorial:HTML CSS

CSS Tutorial:CSS Tutorial

HTML DOM Reference Manual:Style Object

Example

Example 1

Using <style> An element applies a simple stylesheet to the HTML document:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is a paragraph.</p>
</body>
</html>

Try it yourself

Example 2

Multiple styles for the same element:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is a paragraph.</p>
</body>
</html>

Try it yourself

Tips and comments

Note:When the browser reads the stylesheet, it formats the HTML document based on the information in the stylesheet. If some properties are defined for the same selector (element) in different stylesheets, the value from the last read stylesheet will be used (see the example above)!

Tip:To link to an external stylesheet, use <link> tag.

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

Attribute

Attribute Value Description
media Media Queries Specifies the media used by the style.
type text/css Specifies the media type of the <style> tag.

Global Attributes

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

Event Attributes

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

Default CSS Settings

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

style {
  display: none;
}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support