HTML: <style> tag
This HTML tutorial explains how to use the HTML element called the <style> tag with syntax and examples.
Description
The HTML <style> tag is used to embed CSS into the HTML document. It can be placed within the <body> tag or within the <head> tag. This tag is also commonly referred to as the <style> element.
Syntax
In HTML, the syntax for the <style> tag is:
<style>
h1 { color: blue; }
</style>
Attributes
In addition to the Global Attributes, the following is a list of attributes that are specific to the <style> tag:
Attribute | Description | HTML Compatibility |
---|---|---|
type | MIME type of the included resource. If no type is specified, the value of the type attribute will default to text/css. | HTML 4.01, HTML5 |
media | Media that the included resource applies to. The value of this attribute is a media query. If no media is provided, the value of the media attribute will default to all. | HTML 4.01, HTML5 |
title | Indicates the title of an alternative stylesheet set | HTML 4.01, HTML5 |
nonce | Used to whitelist inline styles in a style-src Content-Security-Policy. The nonce (number used once) should be a unique value that is changed every time the policy is updated. | HTML 4.01, HTML5 |
scoped | Indicates that the style only applies to its parent and children elements. (This attribute has been deprecated.) | HTML 4.01, HTML5 |
Note
- The HTML <style> element is found within the <head> tag or <body> tag.
- The <style> tag is used to embed stylesheet information in the HTML document.
Browser Compatibility
The <style> tag has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the <style> tag below, exploring examples of how to use the <style> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
Advertisements