Learn html - html tutorial - style tag in html - html examples - html programs
The <style> tag is holds style information for a HTML document or part of a document.
In HTML, each document can contain multiple <style> tags.
The <style> tag supports Global Attributes and Event Attributes.
<style> element belongs to Metadata content, and if the scoped attribute is present flow content.
Syntax for <style> tag:
<style>content </style>
Difference between HTML 4.01 and HTML 5 for <style> tag:
HTML 4.0.1
HTML 4 is does not support “scoped” attributes of <style> tag.
HTML 5
HTML 5 is support “scoped” attribute of <style> tag.
Sample Coding for <style> tag:
Tryit<!DOCTYPE html><html><head><title>Wikitechy style tag</title><style>
h1 { color: blue; }
p { font-size:38pt;color: red; }
</style></head><body><h1>Welcome to Wikitechy</h1><p>This is a paragraph with style.</p></body></html>
Code Explanation for <style> tag:
<style> tag is used to set color for a <h1> tag and set the font-size and color for a <p> tag.
Output for <style> tag:
The <h1> tag “Welcome to Wikitechy” content will be displayed in blue color, which is specified in <style> tag.
The <p> tag “This is a paragraph with style.” content will be displayed in red color and font-size as 38pt, which is specified in <style> tag.
Attributes of <style> tag:
Attribute
Value
HTML4
HTML5
Description
media
media_query
Yes
Yes
The attribute define which media the CSS style should apply to.
scoped
scoped
No
Yes
This attribute is used to define the style only to this element’s parent element and that element’s child element.
type
text/css
Yes
No
This attribute is used to define the media type of the <style> tag.
Browser Support for <style> tag in HTML:
Yes
Yes
Yes
Yes
Yes
Tips and Notes
Use the <link> tag to link an external style sheet.
Each <style> tag must be located in the head section, if the “scoped” attribute is not used.
