PUBLISHED ON: FEBRUARY 22, 2021
HTML Style Tag
In HTML, the <style> tag contains the style information of the document, or it is a part of a document.
-
The <style> tag contains the CSS which is used for styling the Web Page.
-
The <style> tag can be used inside <head> tag or inside <body> tag; However it is recommended to use it inside <head> tag for organizational purposes.
-
The <style> tag also includes a media attribute that contains media queries.
-
Any HTML Document can have multiple <style> tags inside it.
-
To Link an external stylesheet inside a Web Page use <link> tag inside the <style> tag.
HTML <style> Tag Syntax and Usage
The <style> tag requires the start(opening) tag and end(closing) tag.
<style>
...content here
</style>
HTML <style> Tag Attributes
HTML <style> tag supports both global and event attributes and some of the common attributes are given below:
1. Media
This attribute is used to define which media the style should be applied to. The value of this attribute is a media query.
2. Title
This attribute is used to define alternative stylesheets sets.
3. Type
This attribute is in the form of MIME TYPE define for styling
HTML <style> Tag Basic Example
Given below is an example showing the basic usage of <style> tag in HTML:
Using Multiple <style> tags in a single Document
In the example given below we are going to use multiple <style> tags in a single document:
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
Default CSS Settings for HTML <style> Tag
Most of the Browsers use these default CSS Settings:
style {
display: none;
}
Browser Support for HTML <style> Tag
Following browsers support this attribute:
-
Google Chrome 9.0
-
Internet Explorer 11.0
-
Firefox 4+
-
Opera
-
Safari
