HTML Tags
Advertisements

HTML <style> Tag

Topic: HTML5 Tags ReferencePrev|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>My Document<title>
    <style>
        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>.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties