HTML <style> Tag

Topic: HTML5 Tags Reference« Prev|Next »

Description

The <style> tag is used to define style rules at a page-level (i.e. within the document). The style rules inside the <style> element tell a browser how to present the document. You can place any number of style elements in a document, but it must appear inside the head section (i.e. <head> element). Learn more about style rules.

The following table summarizes the usages context and the version history of this tag.

Parent: <head>
Content: Style information
Start/End Tag: Start tag: required, End tag: required
Version: HTML 4, 4.01, 5
 

Note:However the <style> element is a good method of experimenting with style sheets, but it has disadvantages. The best way to attach style sheets to your documents is with external style sheets.


Syntax

The basic syntax of the <style> tag is given with:

HTML / XHTML: <style type="text/css"> ... </style>

The example below shows the <style> tag in action.

  • <head>
  •     <title>Presentation Demo<title>
  •     <style type="text/css">
  •         h1 {color: #666;}
  •     </style>
  • </head>

Tag-Specific Attributes

The following table shows the attributes that are specific to the <style> tag.

Attribute Value Description
type content-type Specify the styling language which is generally text/css.
media media-types Specifies which media the styles apply to. The value can be a single media (e.g. media="screen") or a comma-separated list (e.g. media="screen, print").
scoped scoped Specifies that the style applies only to its parent element, and that element's child nodes. If absent, the style applies to the whole document.

Global Attributes

Like all other HTML tags, the <style> tag supports the global attributes in HTML5.


Event Attributes

The <style> tag also supports the event attributes in HTML5.


Browser Compatibility

The <style> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 3+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: HTML Styles, CSS.

Related tag: <link>.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.