HTML Style Tag

In HTML, the <style> tag contains the style information of the document, or it is a part of a document.

  • The <style> tag contains the CSS which is used for styling the Web Page.

  • The <style> tag can be used inside <head> tag or inside <body> tag; However it is recommended to use it inside <head> tag for organizational purposes.

  • The <style> tag also includes a media attribute that contains media queries.

  • Any HTML Document can have multiple <style> tags inside it.

  • To Link an external stylesheet inside a Web Page use <link> tag inside the <style> tag.

HTML <style> Tag Syntax and Usage

The <style> tag requires the start(opening) tag and end(closing) tag.

<style>
...content here
</style>

HTML <style> Tag Attributes

HTML <style> tag supports both global and event attributes and some of the common attributes are given below:

1. Media

This attribute is used to define which media the style should be applied to. The value of this attribute is a media query.

2. Title

This attribute is used to define alternative stylesheets sets.

3. Type

This attribute is in the form of MIME TYPE define for styling

HTML <style> Tag Basic Example

Given below is an example showing the basic usage of <style> tag in HTML:

Using Multiple <style> tags in a single Document

In the example given below we are going to use multiple <style> tags in a single document:

<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style> 
  <style>
    p {
      color: blue;
      background-color: yellow;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

Default CSS Settings for HTML <style> Tag

Most of the Browsers use these default CSS Settings:

style {
  display: none;
}

Browser Support for HTML <style> Tag

Following browsers support this attribute:

  • Google Chrome 9.0

  • Internet Explorer 11.0

  • Firefox 4+

  • Opera

  • Safari