HTML Style Tag
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:
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










