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:
The example below shows the <style> tag in action.
Example
Try this code »<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.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Styles, CSS.
Related tag: <link>.
